介绍CSS盒模型

每个HTML标记都可看作一个盒子；

每个盒子都有：内容(content)、填充(padding)、边框(border)、边界(margin)四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；

内容是盒子模型的中心，它呈现了盒子的主要信息。内容有三个属性，width、height和overflow。

填充是内容和边框之间的空间，可以被看作是内容的背景区域。

边框是内容和填充的边界。

边界位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。对于两个邻近的都设置有边界值的盒子，他们邻近部分的边界将不是二者边界的相加，而是二者的重叠，若二者邻近的边界值大小不等，则取二者中较大的值。

盒子本身的大小计算：

Width 
width + padding-left + padding-right + border-left + border-right

Height 
height + padding-top + padding-bottom + border-top + border-bottom