本文研究css的盒子模型

由于当代浏览器基本兼容了HTML5，所以我们不讨论老版本的IE的特殊盒子模型但是css3中加入了box-sizing元素
我们可以选择使用老IE的盒子模型border-box，活着w3c的盒子模型content-box
一下两个盒子模型的height，width都是100px
黑色是border
红色是背景

.box {
    display: inline-block;
    background: red;
    border: 10px solid black;
    height: 100px;
    width: 100px;
    padding: 5px 10px;
    margin: 10px 20px;
}

对盒子模型设置绝对宽高

box-sizing: border-box;

box-sizing: content-box;

实际上，之后当box样式设置了固定的宽高，box-sizing样式才表现出差异。如果我们去掉宽高，让他们根据内容自动调整宽高，看看是什么效果。

取消宽高设置，根据content自动调整

box-sizing: content-box;

可以看出，如果不设置宽高，盒子模型没有任何表现，但是通过浏览器的开发这工具查看发现，height和width是不一样的

所以差别就在于，这两种模型的计算height和width的方式不同

border-box(IE6) = content + padding + border
content-box(w3c) = content

bootstrap对box-sizing的全局设置就是border-size，个人感觉也比较符合我们的直观感觉吧