calc()

试一试

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

语法

/* 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() 函数必须替代以下类型之一的完整 CSS 值

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• 混合类型之一，例如 <length-percentage>

calc() 不能只替换百分比值、长度值等的数字部分，而不替换其后的单位。例如，calc(100 / 4)% 是无效的，而 calc(100% / 4) 是有效的。

calc() 的结果值必须与它所使用的上下文兼容。例如，margin: calc(1px + 2px) 是有效的，但 margin: calc(1 + 2) 无效：它等同于指定 margin: 3，这会导致属性被忽略。

当预期为 <integer> 时，calc() 表达式也可以评估为 <number>，它将被四舍五入到最接近的整数。因此，calc(1.4) 将导致值为 1。如果值的小数部分恰好是 0.5，则该值将四舍五入到正无穷大。例如，calc(1.5) 将导致值为 2，而 calc(-1.5) 将四舍五入为 -1。

calc() 遵循 IEEE-754 标准执行浮点运算，这导致了对 infinity 和 NaN 值的一些考虑。有关常量如何序列化的更多详细信息，请参阅 calc-keyword 页面。

输入注意事项

• calc() 无法对固有尺寸值（例如 auto 和 fit-content）执行计算。请改用 calc-size() 函数。
• * 和 / 运算符不需要空格，但为了保持一致性，建议添加空格。
• 允许嵌套 calc() 函数，在这种情况下，内部函数被视为简单的括号。
• 在自动和固定布局表中，涉及表格列、表格列组、表格行、表格行组和表格单元格的宽度和高度百分比的数学表达式可能被视为指定了 auto。
• 有关 + 和 - 表达式语法的更多信息，请参阅 <calc-sum>。

CSS 类型化算术

当使用 calc() 乘以值时，使用 * 运算符，只有一个值可以包含单位。不支持 200px * 4px 等计算，因为 800px² 在 CSS 中没有意义。

相反，200px / 4px 解析为 50，这在 CSS 中是有意义的。因此，当使用 calc() 函数除以数字时，使用 / 运算符，支持的浏览器允许操作数两侧都有单位，前提是它们是相同的数据类型。例如，100vw / 1px 是有效的，并产生一个无单位的值。

然后，商可以用作接受 <number> 作为值或参数的属性或函数的值，或者通过乘以类型化值将其转换为不同的数据类型。

有关 CSS 中类型化算术的完整解释以及示例，请参阅 使用 CSS 类型化算术。

支持计算相对颜色中的颜色通道

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>

使用 CSS 变量进行嵌套

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

.foo {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

所有变量展开后，--width-c 的值将是 calc(calc(100px / 2) / 2)。当它分配给 .foo 的 width 属性时，所有内部 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-sum>
• <calc-keyword>
• CSS 函数
• CSS 中 calc() 的完整指南 (CSS-Tricks)