标准盒子模型和IE低版本盒子模型的介绍及区别

标准盒子模型：由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>