巧用CSS3的calc()宽度计算做响应模式布局

前言

首先，我们思考一下，calc() 能做什么？

calc() 能给元素做计算，例如：可以给一个 div 元素，使用百分比、em、px 和 rem单位值计算出其宽度或者高度，像是 “width:calc(50% + 2em)” ，这样一来我们就不用考虑元素 div 的宽度值到底是多少，把这个繁琐的任务交由浏览器进行计算。

calc() 语法

calc() 语法非常简单，就像我们小时候学加 （+）、减（-）、乘（x）、除（/）一样，使用数学表达式来表示：

width: calc(expression);

其中 “expression”是一个表达式，用来计算长度的表达式。

calc() 运算规则

calc() 使用通用的数学运算规则，但是也提供更智能的功能：

（1）使用 “+”、“-”、“x” 和 “/” 四则运算；

（2）可以使用百分比、px、em、rem等单位；

（3）可以混合使用各种单位进行计算；

（4）表达式中有 “+” 和 “-” 时，其前后必须要有空格，如 “widht: calc(12%+5em)” 这种没有空格的写法是错误的；

（5）表达式中有 “x” 和 “/” 时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

举个例子：​

我们做一个三列并排的模块，宽度按百分比、有 padding 值、有border 值、还有 margin-right，而且这三个值是 px，

li{
float:left;

width:33.3333%;
height:50px;

padding:10px;
margin-right:10px;

background:#FF6666;
border:5px solid #DAC8A7;
}

​

效果图：

从效果图可以看出，是没有三列并排的，在这种情况下也不好算，即使算出来也有那么一点误差。

于是，我们就用到了calc()，即(width-(padding+border)*2-margin)

li{
float:left;

//width:33.3333%;
height:50px;

padding:10px;
margin-right:15px;

background:#FF6666;
border:5px solid #DAC8A7;

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

}

现在可以实现并排了，效果如下：​

到这儿就告一段落了，我们可以再稍微优化一下左右边 15px 的空距，让两边都挨边，具体操作就是在父级上加个 “margin-right：-15px” 。

​

​现在拿这个去做响应模式就很方便了~

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！