CSS 盒模型

简单来讲，就是用来装页面元素的一个矩形区域。
CSS 中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
标准盒子模型:

IE盒子模型:

从上面的两个图可以看出，这两种盒子模型不同点在于 width 的包含范围。

• 在标准盒子模型中: css中的宽(width) = content
• 在IE盒子模型中: css中的宽(width) = content + padding + border

所以，计算整个盒子的宽度时存在差异：

• 标准盒子模型的盒子宽度：2(border) + 2(padding) + width
• IE盒子模型的盒子宽度：width

---

在CSS3中引入了box-sizing属性，它有两个值 content-box,border-box;
box-sizing:content-box表示标准盒子模型;
box-sizing:border-box表示IE盒子模型;