【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距

盒模型

盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。

可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。

• position属性控制页面上元素间的位置关系。
• display属性控制元素是堆叠、并排或者不在页面上显示。
• float属性提供控制的方法，以便于把元素组成成多栏布局。

盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始，这些属性分为3组：

1. 边框(border):可以设置边框的宽度、样式、颜色。
2. 内边距(padding):可以设置盒子内容区(content)和边框的间距。
3. 外边距(margin):可以设置盒子和邻元素的间距。

换个说法：

• 内容(content)：就是盒子里装的东西。
• 内边距(padding)：怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。
• 边框(border)：就是盒子的本身。
• 外边距(margin)：就是两个盒子之间的距离。

一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是 上(top)右(right)下(bottom)左(left)

• border-top,border-right,border-bottom,border-left
• padding-top,padding-right,padding-bottom,padding-left
• margin-top,margin-right,margin-bottom,margin-left

不用死记，记住border边框、padding内边距、margin外边距就可以了

简写样式： CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。 在每个声明中，属性值得顺序都是**上右下左**的顺序，想象一下顺时针旋转就可以了。

例如：

div{
	margin-top:3px;
	margin-right:4px;
	margin-bottom:5px;
	margin-left:7px;
}

简写：

div{
	margin:3px 4px 5px 7px;
}

有时不需要将4个值全部写出，哪一边没写，就用对边的值。 {margin:3px 4px 5px;}那么左边的值就和右边的值一样，4px。 {margin:3px 4px;}： 上下边框3px，左右边框4px {margin:3px;} ：上下左右边框都是3px

• css

/*由于在不同的浏览器中元素的默认的margin和padding值可能不同
建议把下面这条规则作为样式表中的第一条规则。
这条规则把所有元素默认的外边距和内边距都设定为零
*/
* {
	margin: 0px;
	padding: 0px;
}
div {
	height:100px;/*设置div高度*/
	width:300px;/*设置div宽度*/
	margin: 10px;/*设置外边距*/
	border: 50px solid #900;/*设置盒子的边框 样式 颜色*/
	padding: 20px;/*设置内边距*/
	font-size: 20px;/*设置字体大小*/
}

• html

<div style="float:left;">div的边框宽50px,实线,红色，内边距为20px，外边距10px </div>
<div style="float:left;">div的边框宽50px,实线,红色，内边距为20px，外边距10px </div>

在设置盒子样式前提，需要明白，有些行内标签样式（如：span标签）虽然可以设置内外边距，但是在页面中没有办法显示

边框相关属性

宽度(border-width): 可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值。

样式(border-style):

颜色(border-color):可以使用任何颜色值，包括RGB,HSL,十六进制颜色值和颜色相关的关键字。

CSS3提供的圆角边框： border-radius：该属性用于指定圆角边框的圆角半径。

示例值：0px

CSS3新增的box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。

• box-shadow:是一个复合属性。它含有以下5个属性值。
• hOffset:该属性值控制阴影在水平方向的偏移。
• vOffset:该属性值控制阴影在垂直方向的偏移
• blurLength:该属性值控制阴影的模糊程度。
• scaleLength:该属性值控制阴影的缩放程度。
• color:该属性值控制阴影的颜色。

div{
	box-shadow:10px;
}

• css

#divone {
	width: 300px;
	height: 300px;
	margin: 200px auto;
	padding: 10px;
	font-size: 25px;
	text-align: center;
	line-height: 300px;
	border: 10px solid #900;
	border-radius: 40px;
	/*设置圆角的div*/
	box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/
}

• html

<div id="divone">圆角边框 border-radius</div>
<div id="divtwo"></div>

盒子外边距

叠加外边距：

• 垂直方向上的外边距叠加，取边距较大的值。
• 水平方向上的外边距是两个相邻外边距之和。

<p>Numc tortor ante,accumsan vel malesuada
  vulputate,tempus quis dolor .In ut purus nulla.
  Etiam tincidunt pharetra metus eget ultricies.
  Integer mi ante</p>
<p>Numc tortor ante,accumsan vel malesuada
  vulputate,tempus quis dolor .In ut purus nulla.
  Etiam tincidunt pharetra metus eget ultricies.
  Integer mi ante</p>
<p>Numc tortor ante,accumsan vel malesuada
  vulputate,tempus quis dolor .In ut purus nulla.
  Etiam tincidunt pharetra metus eget ultricies.
  Integer mi ante</p>

• css

*{margin:0px;padding:0px;}
p {
	height: 50px;
	border: 2px solid #900;
	margin-top: 50px;
	margin-bottom: 30px;
}