标准盒子模型和IE盒子模型的区别

标准盒子模型

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。图中的内层是content依次是padding border margin，如下图：

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子

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

相同点

两个模型宽度和高度的计算（是一样的）

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。

一般我们默认的为W3C盒子

不同点

上面的两个宽度相加的属性是一样的。
不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：202+102+102+200=280px;
（margin2+border2+padding2+width）

高度：202+102+20*2+50=130px;

盒子的实际宽度大小为:102+102+200=240px;
（border2+padding2+width）

实际高度：102+102+50=90px;

用ie的盒子模型解释 ：盒子在网页中占据的大小为
宽：202+200=240px;(margin2+width)
高：20*2+50=90px;

盒子的实际大小为：
宽度:200px, （width）
高度:50px;