css盒子模型

1、IE怪异盒子模型

块的宽度=width（已包含padding和border）+margin；

当padding和border宽度>设置的width

块的宽度=padding+border+margin；

2、标准盒子模型

块的宽度=width+padding+border+margin；

3、box-sizing

怪异和标准盒子模型可以通过box-sizing属性切换；

标准盒子模型：box-sizing：content-box；

怪异盒子模型：box-sizing：border-box；

4、兼容写法

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

5、使用场景(border-box替换calc)

<div style="float:left;background-color: black;width: 200px;height: 200px;padding:10px;">
    <div style="width:calc(100% - 20px);height: 30%;padding:0 10px;background-color: whitesmoke;float:left;">
    </div>
</div>

可以替换为

<div style="float:left;background-color: black;width: 200px;height: 200px;padding:10px;">
    <div style="width:100%;box-sizing:border-box;height: 30%;padding:0 10px;background-color: whitesmoke;float:left;">
    </div>
</div>