CSS的盒子模型

盒子模型分为IE盒子和W3C盒子两种：

W3C盒子由margin，border，padding，content

IE盒子由margin，padding，padding，content构成，但是由于content包括padding，border，即为margin+content

 

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

 

转载于:https://my.oschina.net/u/3652781/blog/1535097