css盒模型

1. CSS盒模型分为标准盒模型和IE盒模型
2. 区别：IE盒模型的width包括padding和border，而标准盒模型的width只是content。
3.一张图：

盒模型图示

比如说：给一个元素的width设置为100px，在IE盒模型下，该元素的content+左右padding+左右border=100px，如果将该元素的padding增大，那么它的content就会相应的减小
而对于标准和模型，给定width就是content的值，content的大小与border、padding无关。

5.举个例子

<div class="wrapper1">标准盒模型</div><div class="wrapper4">130*30的盒子</div><div class="wrapper2">IE盒模型</div><div class="wrapper3">100*30的盒子</div><style>
    .wrapper1{        width: 100px;        padding: 10px;        border: 5px solid red;        box-sizing: content-box;
    }    .wrapper2{        width: 100px;        padding: 10px;        border: 5px solid yellow;        box-sizing: border-box;
    }    .wrapper3{        width: 100px;        height: 30px;        background-color: green;
    }    .wrapper4{        width: 130px;        height: 30px;        background-color: green;
    }</style>

运行结果：

盒模型运行结果

6.在浏览器中模拟两种盒模型的方法：设置box-sizing属性
box-sizing:border-box：IE盒模型
box-sizing:content-box：标准盒模型（默认是content-box）

作者：椰果粒
链接：https://www.jianshu.com/p/10b587dc2e58