calc() 是现代 CSS 中极其强大的动态数学计算函数。它允许开发者在 CSS 属性中混合使用不同的长度单位（如百分比 %、视口单位 vh/vw 与绝对像素 px），在无需 JavaScript 介入的情况下实现流畅的自适应弹性布局。
一、 核心语法与经典应用场景
/* 混合百分比与固定像素：自适应侧边栏与主内容区 */
.main-wrapper {
width: calc(100% - 240px);
}
/* 视口全屏自适应减去吸顶导航栏 */
.fullscreen-section {
min-height: calc(100vh - 64px);
}
/* 动态栅格列宽计算 */
.grid-col-4 {
width: calc((100% - 3 * 16px) / 4);
}二、 必须注意的四大关键避坑点
- 加减运算符两侧必须保留空格（致命关键点）：
- ❌
calc(100%-80px)（语法错误，解析失效） - ✅
calc(100% - 80px)（标准语法） - 原因： 减号紧贴数字会被 CSS 解析为负数（如
-80px），导致运算符缺失。
- ❌
- 支持四则运算： 支持
+、-、*（乘法）、/（除法）。乘法或除法的一方必须是无单位数字（如calc(100px * 2)）。 - 支持嵌套计算：
calc(100% - calc(20px + 10px))，现代浏览器可直接写多层括号。