CSS中的box-sizing

box-sizing有两个属性：content-box/border-box

content-box: width仅指内容框宽度，不包括padding和border宽度，该属性的盒子为标准盒子模型

border-box: width指内容框宽度+左右padding+左右border宽度，该属性的盒子为IE盒子模型

代码展示：

.box {
    padding: 100px;
    margin：100px;
    box-sizing: content-box;
    width: 100px;
    border: 10px solid #fff;
}
    

盒子box-sizing属性为：content-box（默认属性）

实际宽度：100px(width) + 100px*2(左右padding) + 10px*2(左右border) + 100px*2(左右margin)

若盒子box-sizing属性为：border-box

实际宽度：100px(width) + 100px*2(左右margin)

应用场景：

content-box是box-sizing的默认属性

当父盒子有特定规格后，不想子盒子超出或影响父盒子范围，则可以使用border-box属性

即使子盒子宽度100%还加了padding也不会超出父盒子大小