函数概述

calc()为CSS属性值数值计算函数，允许一些属性的值用数值计算表达式来动态处理，比如width、height、animation-duration、font-size、margin、padding等，数值类型为的属性基本上都可以用。

虽然无需数学计算，CSS的单位（如rem，vw，和%）已经可以使网页布局具有足够的弹性，来提升Web应用的用户体验。但是在有些情况下，以单一值或单一单位设置页面中某个元素的样式属性，总会让我们感觉束手束脚。下面是一些典型场景：

1. 想要设置内容区域高度为“视口（viewport）高度减去导航条高度”；
2. 想要设置页面中某个元素的宽度为另外两个元素的宽度之和；
3. 想要防止某些文本的可变font-size值，增长超过一定大小；

在以上场景下，我们就得依靠数学计算来实现了。以前，CSS还未如此强大之时，前端工程师一般是通过结合JavaScript代码动态控制元素样式，来达到目的。但自从有了计算属性值之后，我的老板再也不担心我的JS功底了。

好了，下面就来具体说说“数值计算”函数应该如何使用。

函数语法

selector {
   property: calc(expression);
}

其中，calc为函数名，后跟英文括号“()”，计算表达式写在括号中间。计算表达式可以用四则运算（加+、减-、乘*、除/）书写。

使用规则和最佳实践

• 加、减运算符前后都要用空格分开；
• 乘除运算符前后可以不加，但为了统一风格，建议加空格；
• 允许calc()函数嵌套，内层calc函数建议为简单写法，不宜太复杂；
• 表示盒模型属性值时，不可以用“0”替代“0px”，如margin-top: calc(0 + 20px);是无效的；
• 乘除的第二个数不能是百分数，但可以是小数，如font-size: calc(1.25rem / 1.25)是可以的，但font-size: calc(1.25rem / 125%)无效。

函数示例

下面的示例演示了4种用calc()函数设置元素宽度的方式：

div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: red;
  color: white;
  height: 48px;
}

.calc1 > code {
  /* 固定值相加，计算结果：width: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /* 数值相乘，计算结果：width: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /* 数值相减，计算结果 width: 取决于容器宽度 */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /* 混合运算，计算结果：width: 取决于容器宽度 */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

其中，第四个例子演示了计算函数的高级用法：

1. “--predefined-width”为变量定义，便于在后文重复引用；
2. calc()函数可以嵌套使用。

好了，calc()函数就介绍到这，打开电脑试试吧！

更多精通CSS的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！

系列文章：

CSS属性值函数（1）概述及语法