盒子模型是什么？
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部分的高/宽