盒模型 box-sizing: border-box; / content-box

box-sizing: content-box | border-box
浏览器默认属性是 content-box

content-box

content-box

观察上图，

1. 在css区 设置div宽度为100px，高度为60px；
2. 在css区 设置 box-sizing: content-box
3. 盒模型总content区宽度为100px，高度为60px，padding和border不占据content区。

border-box

border-box

观察上图，

1. 在css区 设置div宽度为100px，高度为60px；
2. 在css区 设置 box-sizing: border-box;
3. 盒模型总content区宽度为60px，高度为20px，padding和border占据content区原本的空间，padding分别占据了10px，border分别占据了10px。
   60px + 10px* 2 + 10px* 2 = 100px;
   20px + 10px* 2 + 10px* 2 = 60px;