CSS学习之盒子模式

从CSS角度来看，页面上每个元素都是一个盒子，不管是块元素还是内敛元素等。而这个盒子由四个部分组成。内容区，补白，边框，边界，下面来介绍下这四种元素。

1 内容

每个元素都是以某些内容开始的，比如文本或图像，这部分内容被放置在一个大小正好能包含它的盒子里。

2 补白（padding）

任何盒子在内容区周围都能有一层补白。补白是可选的，所以不一定会有。可以用补白在盒子的内容和边框之间创建可视的空白，补白是透明的，本身没有颜色或修饰。

3  边框(border)

元素周围可以有边框，并且是可选的。边框包围着补白，因为他是围绕内容的一条线，所以视觉上将内容和同一页上的一起元素分隔开来。边框可以设置宽度，颜色和样式。

4 边界(margin)

边界也是可选的，包围着边框。有了边界，就可以在同一页上的元素之间添加空间。如果两个盒子相邻，边界就相当于他们之间的空间。跟补白一样，边界也是透明的，本身没有

颜色或修饰。

图示