CSS系列：CSS中盒子模型

　　盒子模型是CSS控制页面时一个很重要的概念。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。

1. 盒子的内部结构

　　在CSS中，一个独立的盒子模型由content（内容）、border（边框）、padding（内边接）和margin（外边距）4个部分组成。

　　一个盒子实际所占的宽度（或高度）是由“内容 + 内边距 + 边框 + 外边距”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。

2. 边框（border）

　　border一般用于分隔不同元素，border的外围即为元素的最外围，在计算元素实际的宽和高时，需要将border纳入，即border会占据空间。

　　border的属性主要有3个，分别是color、width和style。在使用CSS设置边框的时候，可以分别使用border-color、border-width和border-style来设置。

　　对不同的边框设置不同的属性值方法：按照规定的顺序，给出2个、3个或者4个属性值。

　　◊ 如果给出1个属性值，表示上下左右4条边框的属性值，同为一个值。

　　◊ 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性。

　　◊ 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。

　　◊ 如果给出4个属性值，依次是上右下左边框的属性，即顺时针排序。

　　示例：

border-style: solid;
border-style: solid dashed;
border-style: solid dashed dotted;
border-style: solid dashed dotted double;

　　对于border-width，border-color的属性值设置与border-style类似，支持相同的缩写形式。

border: 1px solid #ff0000;

3. 内边距（padding）

　　padding内边距用于控制内容与边框直接的距离。

padding: 5px;
padding: 5px 10px;
padding: 5px 10px 2px;
padding: 5px 10px 2px 3px;

4. 外边距（margin）

　　margin是元素与元素之间的距离。

margin: 5px;
margin: 5px 10px;
margin: 5px 10px 2px;
margin: 5px 10px 2px 3px;

转载于:https://www.cnblogs.com/libingql/p/4185295.html