CSS盒模式

CSS把每一个元素看做是一个盒子，每个盒子由内容区及可选的补白、边框和边界组成。

所有的元素都被看成是一个个盒子，段落、标题、块引用、列表、列表项目等，甚至内联元素如<em>和<a>等也被CSS看成是盒子。

用CSS可以控制盒子的各个方面：内容周围补白的大小、元素有没有边框（以及类型和大小）、以及元素之间有多少边界。

内容区指什么？

每个元素都以某些内容开始，比如文本或图像，这部分内容被放置在一个大小刚好能包含它的盒子里。注意内容区的内容和盒子边缘之间没有空白。

补白指什么？

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

边框指什么？

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

边界指什么？

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