CSS盒子模型

1.概述

盒子模型的内容范围包括：margin（外边距）、border（边框）、padding（内边距）、content（内容）四个部分组成。

2.内边距

内边距：内边距在content外，在border内

（1）内边框的属性：

padding设置所有边距padding-bottom设置底边距padding-left设置左边距padding-right设置右边距padding-top设置上边距

3.边框

我们可以创建出效果出色的边框，并且可以应用于任何元素

（1）边框的样式

borde-style：定义了10个不同的非继承样式，其中包括none。

（2）边框的单边样式

border-top-style、border-left-style、border-bottom-style、border-right-style

（3）边框的宽度

border-width

（4）边框单边的宽度

border-top-width、border-left-width、border-right-width、border-bottom-width

（5）边框的颜色

border-color

（6）边框单边的颜色

border-top-color、border-bottom-color、border-left-color、border-right-color

（7）其他属性

border-radius：圆角边框

box-shadow：边框阴影

border-image：边框图片

4.外边距

外边距：围绕在内容边框的区域就是外边距，外边距默认为透明区域，外边距接收任何长度单位，百分数值。

（1）外边距常用属性：

margin设置所有边距margin-botton设置左边距margin-top设置上边距margin-left设置左边距margin-right设置右边距

5.外边距合并

外边距合并：也就是说两个视图在上下相邻位置时，两个视图的外边距不会是两者的和，相反则是两个视图的外边距会出现重叠，高度按高的那一个视图的外边距大小来确定。