css---盒子模型

盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。内边距的边缘是边框。
边框以外是外边距。
外边距默认是透明的，因此不会遮挡其后的任何元素。

四种设置方向的固定格式：
上、右、下、左（顺时针）
上、左右、下
上下、左右
上下左右

边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常用属性:
border:简写属性，用于把针对于四个边的属性设置在一个声明。
border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。
border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。
border-width:简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度
border-top:简写属性，用于把上边框的所有属性设置到一个声明中
border-right:简写属性，用于把右边框所有属性设置到一个声明中
border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中
border-left:简写属性，用于把左边框的所有属性设置到一个声明中

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
	width:200px;
	height:200px;
	background: goldenrod;
	border-bottom: 5px solid blue;/*只设置下面的边框*/
	/*border:5px solid blue;可以让上下左右都设置好*/
}
	</style>
</head>
<body>
<div>1111</div>
</body>
</html>

截图：
在这里插入图片描述

外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
常用属性:
margin:简写属性，在一个声明中设置所有外边距属性
margin-top:定义元素的上外边距
margin-right:定义元素的右外边距
margin-bottom:定义元素的下外边距
margin-left定义元素的左外边距
注意:在使用margin来定义所有外边距时，可以使用值复制。
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
常用属性:
padding:简写属性，作用是在一个声明中设置元素的所有内边距属性
padding-top:定义元素的上内边距
padding-right:定义元素的右内边距
padding-bottom:定义元素的下内边距
padding-left:定义元素的左内边距。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			background: gray;
		}
		img{
			border: 5px solid black;
			width: 200px;
			height: 200px;
			padding: 10px;
			margin:35px;
			outline: 3px dotted purple;
		}
	</style>
</head>
<body>
<div>
	<img src="C:\Users\Administrator\Desktop\sublime练习\图片\登录.png">
</div>
</body>
</html>

截图：
在这里插入图片描述

posted on 2021-11-07 14:40  一只花小友  阅读(35)  评论(0)    收藏  举报

导航