IE盒模型与W3C标准盒模型

网页盒子模型存在两种： 

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区  别： IE的content部分把 border 和 padding计算了进去;

在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。 

1：标准W3C盒子模型 

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

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

2： IE盒子模型 

宽=width+(border-left)+(border-right) 
高=height+(border-top)+(border-bottom) 

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

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

 宽度为：20*2+10*2+10*2+200=280px; 

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

 盒子的实际宽度大小为:10*2+10*2+200=240px;

 实际高度：10*2+10*2+50=90px;

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

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

我们常常理解的盒子模型是w3c这样的盒子模型