CSS的盒模型分两种，content-box和border-box
在CSS中，使用 box-sizing这个属性来设置是 content-box或者border-box
它们两者之间的区别看下图。
content-box 的宽度只包含内容部分。
而border-box的宽度包含，border，padding,content
Q：具体是什么意思呢？
A：我们可以来看个例子；
比如我这里将两个div 分别设置成 content-box和border-box 的样式。
都给它们设置了同样的100px 的宽度。
但是我们看下结果会发现，明明两个div 里面的单词长度相差不了多少。
但是结果却是border-box的折行了。
这是为什么？
我们打开F12 来检查一下。
我们可以看下上面两张图的区别，我们可以看到。
当你给content-box设置了width:100px 之后，它真的就把内容content的宽度如实的设置为了100px .但是又因为这个div 还设置了,padding ,border。所以这整个 设置为content-box 的div ，的宽度就是 width+padding+border宽度。
所以最终得到的实际宽度，其实是比我们自己设置的width:100px 要宽很多的。
那我们看下设置了border-box 的这个div 的情况。
我们会发现它的内容部分的宽度只有60px ,这是什么原因呢？
原来我们设置的width:100px ，在border-box的情况下，并不完全分配给了content：内容部分，我们设置的width其实是分配给了content, padding, border宽度,这三个部分。
所以才会导致，内容部分的宽度，不是像我们所想的那样有100px 。
所以，就不奇怪，为什么在设置了同样width 且文字内容没差多少的情况下，border-box和content-box在显示上的区别会如此不同了。
总结一下：
border-box 的宽度=border宽度+padding+content的宽度
content-box 的宽度=content的宽度
这个就是两者之间的区别。
Q：那哪种模型更好用呢？
A：这个因地制宜。在设置了 width,border,padding的情况下，border-box更合适些。
如果没有设置的话，其实content-box和border-box相差不大。
