calc()

/* calc(expression) */
calc(100% - 80px)

/* Expression with a CSS function */
calc(100px * sin(pi / 2))

/* Expression containing a variable */
calc(var(--hue) + 180)

/* Expression with color channels in relative colors */
lch(from aquamarine l c calc(h + 180))

calc() 函数接受一个表达式作为参数，该表达式的结果用作 CSS 属性的值。在该表达式中，操作数 可以使用下面列出的运算符 进行组合。当表达式包含多个操作数时，calc() 使用标准的 运算符优先级规则

+

将指定的操作数相加。

-

从第一个操作数中减去第二个操作数。

*

将指定的操作数相乘。

/

将左侧操作数（被除数）除以右侧操作数（除数）。

所有操作数（除了类型为 <number> 的操作数）必须以适当的单位字符串结尾，例如 px、em 或 %。您可以在表达式中的每个操作数中使用不同的单位。您也可以使用括号在需要时建立计算顺序。

关于 calc()，需要注意以下几点

• 对 calc() 中参数的序列化遵循 IEEE-754 标准的浮点数学，这意味着关于 infinity 和 NaN 常量的几个情况需要注意。有关如何序列化常量的更多详细信息，请参阅 calc-keyword 页面。
• 在自动和固定布局表格中，涉及表格列、表格列组、表格行、表格行组以及表格单元格的宽度和高度的百分比的数学表达式可能被视为指定了auto。
• calc() 函数不能直接用数字值替换百分比类型；例如，calc(100 / 4)% 是无效的，而 calc(100% / 4) 是有效的。
• 当 calc() 用于预期 <integer> 的地方时，该值将四舍五入到最接近的整数。因此，calc(1.4) 将得到 1 的值。如果值的尾数正好是 0.5，则该值将向上取整。例如，calc(1.5) 将得到 2 的值，而 calc(-1.5) 将四舍五入到 -1。

• + 和 - 运算符**必须用 空格 包裹**。例如，calc(50% -8px) 将被解析为“百分比后跟一个负长度”——这是一个无效的表达式——而 calc(50% - 8px) 是“百分比后跟一个减法运算符和一个长度”。同样，calc(8px + -50%) 被视为“长度后跟一个加法运算符和一个负百分比”。
• * 和 / 运算符不需要空格，但建议为了保持一致性而添加空格。
• 允许嵌套 calc() 函数，在这种情况下，内部函数被视为简单的括号。
• 对于长度，不能使用 0 来表示 0px（或其他长度单位）；相反，必须使用带单位的版本：margin-top: calc(0px + 20px); 是有效的，而 margin-top: calc(0 + 20px); 是无效的。
• 当前的实现要求，对于 * 和 / 运算符，其中一个操作数必须是无单位的。对于 /，右操作数必须是无单位的。例如，font-size: calc(1.25rem / 1.25) 是有效的，但 font-size: calc(1.25rem / 125%) 是无效的。

calc() 函数可以用于直接在 相对颜色 的上下文中操作颜色通道。这允许在诸如 rgb()、hsl() 和 lch() 等颜色模型中动态调整颜色通道。

相对颜色语法定义了许多颜色通道关键字，每个关键字都代表颜色通道的值为 <number>（有关更多信息，请参阅 通道值解析为 <number> 值）。calc() 函数可以使用这些颜色通道关键字来对颜色通道进行动态调整，例如，calc(r + 10)。

<calc()> = 
  calc( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

当 calc() 用于控制文本大小时，请确保其中一个值包含一个 相对长度单位，例如

h1 {
  font-size: calc(1.5rem + 3vw);
}

这将确保文本大小在页面被缩放时会进行缩放。

• MDN 理解 WCAG，指南 1.4 解释
• 理解成功标准 1.4.4 | W3C 理解 WCAG 2.0

calc() 使得使用设定边距来定位对象变得很容易。在这个例子中，CSS 创建了一个横跨窗口的横幅，横幅两侧与窗口边缘之间有 40 像素的间隙

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">This is a banner!</div>

calc() 的另一个用例是帮助确保表单字段适应可用空间，而不超出其容器的边缘，同时保持适当的边距。

让我们看看一些 CSS

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

在这里，表单本身被设置为使用可用窗口宽度的 1/6。然后，为了确保输入字段保持适当的大小，我们再次使用 calc() 来确定它们应该等于其容器的宽度减去 1em。然后，下面的 HTML 使用了这个 CSS

<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

可以使用 calc() 与 CSS 变量 一起使用。考虑以下代码

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

在所有变量展开后，widthC 的值为 calc(calc(100px / 2) / 2)。当它被分配给 .foo 的宽度属性时，所有内部 calc() 函数（无论嵌套深度如何）都将被扁平化为简单的括号。因此，width 属性的值最终将是 calc((100px / 2) / 2)，等于 25px。简而言之，calc() 内部的 calc() 与使用括号相同。

calc() 函数可以用于调整 相对颜色 中的单个颜色通道，而无需将颜色通道值存储为变量。

在下面的示例中，第一段使用了一个 <named-color>。在接下来的段落中，calc() 与 rgb() 和 hsl() 函数一起使用来调整相对于原始命名颜色的每个颜色通道的值。

<p class="original">Original text color in rebeccapurple</p>
<p class="increase-hue">Hue increased by 80</p>
<p class="increase-lightness">Lightness increased by 20</p>
<p class="decrease-lightness">Lightness decreased by 10</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

有关使用 calc() 函数推导出相对颜色的另一个示例，请参阅使用相对颜色页面上的 使用数学函数 部分。

• <calc-keyword>
• CSS 函数
• CSS 中 calc() 的完整指南（CSS-Tricks）