CSS: Box Model

   使用CSS的基础是理解Box Model，CSS将html中的每个元素都看作一个Box，如下图

    上图除了标明CSS中厂常用的若干属性，还包括不同属性之间的层次关系，由顶层向下依次是border, content, padding, background-img, background-color, margin在页面显示时，上层的元素会覆盖下层元素。

1. 页面元素的宽度计算：

   offset width = margin-left + border-left + padding-left + width + margin-right + border-right + padding-right

   当使用css的width属性时，设定的是上述等式右侧的width，而并非实际总宽度。

2. 由于padding是页面内容与边框的间距，所以当设定background-color时，颜色会填充content与padding的空间，不包括margin，因为margin是设定这个box与其他元素的间距。