CSS3 box-sizing 属性用处

box-sizing属性对于盒模型布局有重要意义，下面来看看这个属性是怎么回事吧

下面我们写个盒模型，看看它的实际宽高：

.box{
    width: 100px;
    height: 100px;
    border: 10px solid #ccc;
    padding: 10px;
    background-color: antiquewhite;
}
<div class='box'></div>

下图为实际运行效果

DIV盒子我们预设的宽高是100px，但由于border边框的宽度以及padding内边距的介入，将盒子的实际宽高变成了下图。盒子实际宽度变成了100+20（左右边框）+20（左右内边距）=140

所以我们很多时候布局时不得不考虑边框和内边距对盒子的影响，十分的麻烦。
但有了box-sizing这个属性后，就变得简单许多了。box-sizing有两个主要属性值：content-box（默认值），border-box。上方案例我们没有设置box-sizing属性，实际上它的值为：box-sizing:content-box;
下面我们将上方案例加上属性：box-sizing:border-box;看看效果

.box{
    width: 100px;
    height: 100px;
    box-sizing:border-box;
    border: 10px solid #ccc;
    padding: 10px;
    background-color: antiquewhite;
}
<div class='box'></div>

下方为运行效果，盒子明显变小了（没有对比可能不太明显）

我们来看看控制台的盒模型，就更加清楚了

此时，DIV盒模型总宽度变回了100，是我们预期的效果，只是将border和padding往盒子内部挤压了，我们实际内容宽度变成了60，但是这样就省去了计算的麻烦，让我们布局更加轻松了。