CSS盒子模型

所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框和距离等参数，来调整盒子的位置。

一个盒子的内容由content(内容)、border(边框)、padding(间隙)和margin(间隔)这四个部分组成，如下图所示。

一个盒子的实际宽度(或高度)是有content+padding+border+margin组成的。进一步可细化为以下公式。

元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

元素的实际高度=上边界+上边框+上填充+内容高度+下填充+下边框+下边界

border一般用于分离元素，border的外围即为元素的最外围，因此计算元素实际的宽度和高度时，应该将border考虑进来。也就是说，border会占据空间，所以在计算精细的版面是，一定要把border的影响考虑进去。

padding用于控制content和border之间的距离，当在浏览器中使用width和height属性指定父类的width和height时，由于width和height的值中包含padding，那么内容元素content会受到padding的挤压，在网页设计中可以利用这一点实现许多效果。

margin指的是元素与元素之间的距离，从直观上而言，margin用于控制块与块之间的距离。倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。