box-sizing

先来看一个场景：想让div1与div2并排放入最外面的盒模型中且两个div均占50%的宽度。

如果只给两个width设置50%则会出现如下情况：

这是为什么呢？假设最外面的盒模型width:400px，由于添加了border属性，此时div1和div2的宽度在原来50px基础上加上了两倍的border宽，div1+div2的

width=400px+4*border > 400px，由于设置了float属性，div2掉到了下面。如下图：

       

如何处理这种情况？只需要给两个div加上box-sizing:border-box即可:

        

来看一下w3cschool上对box-sizing:border-box的解释：

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

即在200px内部减去2倍的border宽度，其width仍为200px,但是content变为194px。