css盒子模型 在不同浏览器中的差别

网页中常常听到的属性：内容，填充，边框，间距等一些属性.这些属性我们可以用现实生活中的盒子模型进行了解。

如果我们有一个盒子，在盒子中放的物品就是我们网页中的内容，物品和盒子之间的空隙就相当于填充，有了这个填充我们能够很轻易的把物品从盒子中取出来，边框就相当于盒子本身，间距是一个盒子和另一个盒子堆放在一起的时候，他们之间的距离。

网页中的盒子模型；我们常常要控制盒子模型的宽度width:   

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;

 

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

例如一个盒子模型如下：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这样的盒子模型