今天浏览这个网站的时候，出于好奇查看了别人写的代码，发现了这行代码，

于是我做了一些研究，发现calc()可以从字面上理解为一个函数。 事实上，calc是英文单词（）的缩写。 它是CSS3的新功能，用于指定元素的长度。 例如，您可以使用 calc() 为元素的 、 、 font-size 和 width 属性设置动态值。 为什么叫动态值呢？ 因为我们使用表达式来获取值。 然而，calc()最大的好处是它可以用于流体布局。 元素的宽度可以通过calc()计算。

calc() 能做什么？

calc() 允许您计算元素。 你可以给一个div元素，使用百分比、em、px和rem单位值来计算它的宽度或高度，比如“width:calc(50% + 2em)”，这样就不用考虑宽度了元素 DIV 的值，并将这个烦人的任务留给浏览器来计算。

calc() 语法

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

width: calc(expression);

其中“”是表达式，用于计算长度的表达式。

calc()的运算规则

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

使用四种算术运算“+”、“-”、“*”和“/”；

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

可以使用混合单位进行计算；

表达式中存在“+”和“-”时，其前后必须有空格。 例如“widht: calc(12%+5em)”不加空格是错误的；

表达式中存在“*”和“/”时，前后不能有空格，但建议留空格。

浏览器兼容性

让我们举个例子。 让我们制作一个并排的三列模块。 宽度的单位是百分比、with value、with value、-right，这三个值都是px。

li{
float:left;
width:33.3333%;
height:50px;
padding:10px;margin-right:10px;
background:#FF6666;
border:5px solid #DAC8A7;
}

渲染：

它不会正确并列。 在这种情况下，就很难计算了。 就算计算出来，也会有一点误差吧？ 现在我们使用 calc(),

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 )}

意思是(宽度-(+)*2-)

现在并肩而行

好了，故事到这里就结束了。 我们稍微优化一下左右两侧15px的间隙，让两侧靠得很近。 只需将 -right:-15px 添加到父级即可，OK，完成。

现在用这个作为响应方式应该会很方便。

还有一篇老外写的文章介绍怎么做。 如果您有兴趣，可以阅读。

从：

如果您觉得推荐内容有帮助，请长按二维码鼓励。