box-sizing 和calc()

同样，看到一个css的面试题，修复侧边栏

我们在实际开发中经常也会遇到这个问题，这两列分别是75%和25%的宽度，并且使用浮动方法，侧边栏依旧掉下去。原因是由于例实际宽度超过了100%——由于padding，它们加起来超过了。我们现在用两种办法来解决。

1.box-sizing

所以在上面这个测试题中我们把两列分别加上box-sizing：border-box,那么它的宽度就把border和padding计算入width之内

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

 

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

2.calc()

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

所以上述面试题，我们也可以把这些块的width改写成width:calc(75% -padding),也能轻易的解决掉这个问题。

那么如果我们在开发的时候经常会遇到这种三列平均分布的布局情况，假设中间的间隔是5px, 我们如何来设置这些div的宽度呢？

具体代码如下：

*{margin: 0; padding: 0;}
.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}