标准盒子模型:由margin、border、padding、content组成
IE低版本盒子模型:由margin、border、padding、content组成
区别:IE低版本盒子模型的content是由border、padding、content组成
上图
标准盒子模型
content = 200
IE低版本盒子模型
content = content+padding+border = 80+50+50+10+10 = 200
区别图
.box{
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
border:10px solid #000;
margin:50px;
}
.box1{
box-sizing: content-box;
/*标准盒子模型*/
}
.box2{
box-sizing: border-box;
/*IE低版本盒子模型(怪异盒子模型)*/
}
<div class="box box1">
</div>
<div class="box box2">
</div>