标准盒子模型以及IE盒子模型（怪异盒子模型）

两者都是由content、padding、border、margin构成。

在标准盒子模型中，你定义的width和height只是content这一部分的大小，而在浏览器中所表现出的盒子大小则是content+padding+border所构成 。

例如：width=200px；height=200px；padding=10px；border=1px；这时浏览器所表现出的盒子的width就为200+10*2+1*2=222px；height也是222；

在IE盒子模型中（怪异盒子模型）你所定义的width和height就是浏览器中所表现的盒子大小。所写即所得。利用box-sizing：border-box把标准盒子模型转化为怪异盒子模型。

例如：width=200px；height=200px；padding=10px；border=1px；这时浏览器所表现出的盒子的width就为你所定义的200px；高度也是同样。