盒子模型 -css 中的老生常谈

盒子模型是什么？

CSS 盒子模型（Box Model）。在所有的 HTML 元素都可以看成一个盒子；在 CSS 中，Box Model 这一术语被用来设计和布局中使用。

现在已知的有两种盒模型，W3C 盒模型（标准盒子）和 IE 盒子模型（怪异盒子）。

W3C 盒模型（标准盒子）和 IE 盒子模型（怪异盒子）分别是什么？

W3C 盒模型，也就是标准盒子模型：

宽度=内容的宽度（content）+ border + padding + margin

IE 盒子模型，也就是怪异盒子模型：

宽度=内容宽度（content+border+padding）+ margin

为什么叫 IE 盒子模型呢。是因为在低版本的 IE 中盒子使用的都是 border-box。后期 IE5.5、IE6 及其以后，盒模型都为 content-box。注意：当浏览器未设置<!doctype>声明时，盒模型都为 border-box。

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE 盒模型 box-sizing: border-box

通过 css3 的 box-sizing 属性，可以更改元素的盒子模型。标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

box-sizing 属性？

用来控制元素的盒子模型的解析模式，默认为 content-box

content-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽

border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽