4.9.5 关于盒子的宽度

div可以设定宽度，假设有一个div设定了宽度为200px，然后它又设定了填充padding，还有边框，如下面代码所示：
<style>
.test-div{
    width:200px;
    padding:20px;
    border:20px solid #ccc;
    box-sizing:content-box;
}
</style>
<div class="test-div">
    我实际的宽度是200+20*2+20*2
</div>
那么这个div的实际宽度已经超过200px了：

因为本身宽200px,两边填充20px一共40px，边框一边20px共40px，那么一共280px。
这似乎没有问题，然而在定位的时候，这就是一个很麻烦的问题。
于是有一个专门的css规则来解决这个问题，box-sizing
box-sizing:border-box   -表示盒子的宽度包含所有填充、边框，width是多少就是多少。
box-sizing:content-box  -表示盒子得宽度值是width加上两边填充，加上两边边框,这是默认值，如果没有指定别的值，盒子宽度就是这么计算的。