盒模型之怪异盒模型

盒模型是学习网页布局最基础的概念没有之一，但盒模型在实际使用时会有一些麻烦事儿出现，比如盒模型的计算方式。而后，为了解决计算的麻烦，又新增了一个box-sizing的css属性来解决这个问题。

先来看看传统的盒模型计算方式吧

页面中有一个div标签，宽高都为100px，为了方便区分，给文字、背景、边框添加了色彩，并且为p标签添加了内边距，文字水平垂直居中。用通配符粗暴地去掉了默认情况下标签的外边距。代码如下：

在这里，整个div的宽高实际上已经不是100px了，因为它设置了内边距和边框，那么它实际的宽高应该是130px。这样计算无疑是会和设计图的效果有出入，这个一下相差大几十个像素，设计师还不砍人啊！F12看看浏览器是怎么分配的吧！如图：

其实做一个简单的计算，就可以解决这个问题，宽高分别减去内边距与边框和的两倍即可，也就是把宽高设置成70px。这样的计算虽然简单，但如果需要做计算的地方多了，可就成了一件费时枯燥的事情了。这时，如果给这个div的盒模型转成一个怪异盒模型，那就很容易的可以避免这样的问题出现。代码很简单，新加一条css样式：box-sizing:border-box;这个时候再来看看浏览器是怎么做分配的，如图：

总结

可以发现添加了box-sizing:border-box;属性后，改变了盒子的计算方式，盒子的内容宽高实际上已经减去了内边距和边框，从而使得整个盒模型的宽高等于我们预先所设置的宽高。在默认情况下，box-sizing的属性值应该是content-box，也就是传统盒模型的计算方式。怪异盒模型，就是这么反常，这么奇怪！