网页制作：calc() 函数详解及在 width 属性中的应用

在网页制作过程中，calc() 是 CSS 的一个原生函数，允许你在指定属性值时执行简单的算术运算（加法、减法、乘法、除法）。它特别适合用于 width、height、margin、padding、font-size 等接受长度值的属性。通过 calc()，你可以混合使用不同的单位（如百分比、像素、em、rem、视口单位等），从而实现更灵活、响应式的布局。

基本语法

width: calc(表达式);

表达式可以包含 +（加）、-（减）、*（乘）、/（除）运算符。

重要：运算符前后必须保留空格（例如 calc(100% - 20px) 正确，calc(100%-20px) 无效）。

允许混合单位，如 calc(100vh - 5rem)、calc(50% + 10px) 等。

calc实际应用举例

固定边栏 + 流体主内容（两列布局）

假设左侧边栏宽度固定为 200px，右侧主内容区域自动填满剩余宽度。

<div class="container">
  <aside class="sidebar">固定边栏 200px</aside>
  <main class="content">主内容区域宽度 = 100% - 200px</main>
</div>

.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}
.sidebar {
  float: left;
  width: 200px;
  background: #f0f0f0;
}
.content {
  float: left;
  width: calc(100% - 200px); /* 关键：总宽度减去边栏宽度 */
  background: #d9edf7;
}

效果：无论容器如何缩放，主内容区域始终比父容器宽度少 200px，完美实现自适应。

为元素添加内边距，而不破坏“百分比宽度”

有时我们希望一个块级元素的宽度为父容器的 100%，但同时需要固定的左右内边距。直接设置 width: 100% 再加上 padding 会导致元素溢出父容器（标准盒模型下）。使用 calc() 可以解决：

.box {
  width: calc(100% - 40px);  /* 父容器宽度减去左右各 20px 的内边距 */
  padding: 0 20px;
  background: #ffcc00;
  box-sizing: border-box;  /* 配合 box-sizing 更稳健，但 calc 仍然有用 */
}

如果不使用 calc()，你可能需要在外层再套一个容器，或者使用 box-sizing: border-box 让 padding 向内挤，但 calc() 提供了另一种直观的控制方式。

响应式网格系统中的复杂间距

假设需要创建一个三列网格，每列之间有 2% 的间距，且最左侧和最右侧与容器边缘无间距。可以用 calc() 精确控制每列宽度：

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-item {
  width: calc((100% - 2 * 2%) / 3);  /* 总宽度减去两个间距，再除以 3 */
  margin-bottom: 20px;
  background: #b0e0e6;
}

这里 calc() 让间距和列宽都使用百分比，布局能随容器平滑缩放，避免了固定像素值带来的不协调。

与视口单位结合，实现高度自适应

设置一个元素高度为视口高度减去固定高度的页眉和页脚：

.main-content {
  height: calc(100vh - 80px - 60px); /* 视口高度减去 80px 页眉和 60px 页脚 */
  overflow-y: auto;
}

calc() 函数的浏览器兼容性

calc() 拥有非常良好的浏览器支持，可以安全地用于生产环境。

Chrome：19+（2012年发布）完全支持，无前缀。

Firefox：4+（2011年发布）使用 -moz-calc()，16+ 开始支持无前缀。

Safari：6+（2012年发布）完全支持，无前缀。

Edge：全部版本支持（包括基于 EdgeHTML 的早期版本和基于 Chromium 的新版）。

Internet Explorer：IE9 部分支持（不支持用在 background-position 上，但支持 width 等属性）；IE10+ 完全支持。

Opera：15+ 完全支持（基于 Chromium）。

移动端：

iOS Safari：6+ 完全支持。

Android Browser：4.4+ 完全支持；部分旧版本（4.0–4.3）需要 -webkit-calc()，但份额已极低。

Chrome for Android、Firefox for Android 等均完全支持。