CSS 盒模型

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 border-box

我们可以看下上面两张图的区别，我们可以看到。

当你给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相差不大。