标准盒子模型和IE盒子模型


标准盒子模型和IE盒子模型



 标准盒子模型=margin +border +padding +content(content=width|height)


标准盒子模型和IE盒子模型


IE盒子模型 = margin+content(content=border+padding+width|height)


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

标准(w3c)盒子模型: 这个盒子模型占据的宽度为:20*2+10*2+10*2+200=280px(margin*2+border*2+padding*2+width)

高度为:20*2+10*2+20*2+50=130px(margin*2+border*2+padding*2+height)

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

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

IE盒子模型 :

盒子在网页中占据的宽度为20*2+200=240px; 高:20*2+50=90px;(因为此盒子content内容已经包含padding和border属性)

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




标准盒子模型和IE盒子模型