来看一下一直有点模糊的box-sizing属性。

这是一个盒模型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

*{
    margin: 0;
    padding: 0;
}

.box1{
    box-sizing: content-box;
    /*box-sizing: border-box;*/
    width: 100px;
    height: 100px;
    background: deepskyblue;
    border:10px solid pink;
    padding: 10px;
}

box-sizing无关margin，margin的规则没有改变。

主要修改的是content，padding，border的渲染规则。

content-box下，设置width代表的是：content区域独占这个宽度。

当前content自己使用width的100，然后padding的10px和border的10px都在外面。

当前这个元素的实际的整体的宽度（所占用的宽度）就是：100 + 20 + 20；

接下去看一下border-box；

content 区域的宽度缩短到了60，因为需要content + padding + border 合起来等于100. 元素合计占用的宽度也只有100.

所以我们可以简单的理解box-sizing就是修改这三个盒模型夹层空间和width之间的关系。

contentbox ： width = content width

声明一个盒子是内容盒子的时候，宽度的计算方式 = 它盒子content的宽度

borderbox：width =content width + padding width + border width。

声明一个盒子是边框盒子的时候，宽度 = content + padding + border

一个很简单的记忆方法就是

content-box就是width去声明content的宽度

border-box就是width去声明border内的全部盒子的宽度