基础 -- CSS盒模型

1. 什么是CSS盒模型

    元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。

2. IE盒模型和W3C盒模型

CSS盒模型分为IE盒模型（图2）和W3C盒模型（图3）。其实，IE盒模型是怪异模式（Quirks Mode）下的盒模型，而W3C盒模型是标准模式（Standards Mode）下的盒模型。 IE6及其更高的版本，还有现在所有标准的浏览器都遵循的是W3C盒模型，IE6以下版本的浏览器遵循的是IE盒模型。

IE盒模型: width包括content,padding,border

W3C盒模型:width只包括content

3. CSS3属性box-sizing

如果计算一个盒子的长宽高，我们一般都是盒子本身的厚度加上盒子里的空间大小，所在在IE盒模型和W3C盒模型，我们会觉得IE盒模型更符合逻辑。 不同的人有不同的习惯，所以CSS3新增了一个属性box-sizing: content-box | border-box | inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。