CSS calc()：混合单位、语法规则与示例

calc() 的作用

calc() 在 CSS 值中进行算术运算，而且可以混合使用那些只有在布局时才确定大小的单位。最经典的场景是“全部宽度减去一个固定宽度的侧边栏”：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% 只有在页面完成布局后才能确定，而 180px 是固定的，所以没有任何一种单位能单独表达这个值。calc() 会把它算出来：在 800px 宽的预览中，这一行宽 784px，主栏得到 604px，布局下方的那一行会打印出真实的数字。如今用 flexbox 或 grid 可以不做数学运算就实现这种布局，但同样的减法仍然随处可见：高度减去头部、宽度减去间距。

语法规则

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

之所以有空格规则，是因为 100% -20px 会被解读为两个独立的值，第二个是负数。当 calc() 无效时，整条声明都会被丢弃，元素保留之前规则给它的值。

试一试表达式

为盒子的宽度输入任意表达式。浏览器会告诉你它是否有效，以及最终解析出的宽度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

试试 100%-200px（无效，没有空格）、100% / 3、50% + 4rem、2 * 120px、200px * 2px（无效）和 (100% - 40px) / 2。

calc() 配合 CSS 变量

变量和 calc() 是天生的搭档：只存储一次基础值，其他值都从它推导出来。没有单位的变量乘以一个单位后，就变成了长度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

把 --space 改成 12px，或者把 --cols 改成 4，所有推导出的值都会跟着变。如何声明变量以及变量的作用域，见 CSS 变量页面。

常见用法

如果一个值必须保持在某个范围内，请使用 clamp()，它的参数里可以直接写同样的运算，不用再写 calc()。

calc() 可以用在哪里

凡是允许使用长度、百分比、数字、角度或时间的地方都可以：width、margin、padding、top、font-size、line-height、网格轨道尺寸、transition-delay，以及 transform 中的角度。它可以嵌套，嵌套的 calc() 和普通的括号作用相同。

角度就是一个很好的例子。下面每个刻度都有自己的 --i（0 到 11），一条规则就能用 calc(var(--i) * 30deg) 把它变成角度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

第 3 个刻度得到 rotate(90deg)，Chrome 把它报告为矩阵 matrix(0, 1, -1, 0, 0, 0)：也就是旋转四分之一圈。left: calc(50% - 2px) 减去刻度自身 4px 宽度的一半，让每个刻度居中。

常见错误

• - 或 + 两侧没有空格。 calc(100%-20px) 无效，会被忽略。
• 两个长度相乘。 calc(10px * 2px) 在 CSS 中没有意义。* 的一侧必须是纯数字。
• 父元素没有设置高度时，用 calc() 计算百分比高度。 和 height: 100% 一样，height 使用 calc(100% - 20px) 时需要父元素有确定的高度。
• 在 flexbox 或 grid 就能搞定的地方使用 calc()。 用 width: calc(33.333% - 10px) 来做分栏很脆弱；display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 则完全不需要计算。
• 以为会看到错误信息。 浏览器不会对无效的 calc() 发出警告。请在开发者工具中检查元素：无效的声明会显示为被划掉的样子。