calc() 函数用于混合单位运算实现响应式布局，支持像素、百分比等单位组合，但需注意空格规范、禁用嵌套、变量降级及避免动画中高频使用。
calc() 函数能做什么：替代手算、响应式缩放、避免重复写死值
calc() 不是“动态 CSS”，它在解析时就完成计算，但能让你把像素、百分比、rem、vh 等单位混合运算，省去 JS 干预或冗余媒体查询。典型场景包括：侧边栏固定宽 + 主内容自适应、表单控件留白对齐、字体大小随视口平滑过渡。
注意：括号内运算符前后**必须加空格**，否则会解析失败 —— calc(100%-20px) 是错的，calc(100% - 20px) 才对。
常见错误：单位混用非法、嵌套 calc() 不被支持、CSS 变量未降级处理
以下写法会直接失效：
-
calc(10px + 2em)：不同维度单位不能相加（长度 + 长度允许，但px和em在某些旧浏览器中可能触发兼容问题） -
calc(calc(100% / 3) - 10px)：嵌套calc()在所有主流浏览器中都不支持 -
width: calc(var(--base-width) - 20px)：若--base-width未定义或值非法（如空字符串），整条声明会被丢弃，且无报错提示
与 CSS 自定义属性配合：实现可维护的动态布局系统
把变化的基数抽成变量，calc() 做“胶水”：
立即学习“前端免费学习笔记（深入）”；
body {
--sidebar-width: 240px;
--gutter: 16px;
}
<p>.main-content {
width: calc(100% - var(--sidebar-width) - var(--gutter));
}这样改宽度只需动变量，不用遍历所有 calc() 表达式。但要注意：
- 变量必须在作用域内已声明，继承无效（
:root最安全） - IE 完全不支持 CSS 变量，
calc()虽支持到 IE9，但两者合用需加 fallback - 不要在
calc()中对变量做二次运算，如var(--x) * 2—— 这不是合法语法
性能和兼容性底线：别在高频动画属性里用 calc()
calc() 本身不触发重排，但如果用在 transform、top、left 等频繁变更的属性上，尤其含 % 或 vw 时，可能因布局依赖导致隐式同步计算，拖慢动画帧率。
更稳妥的做法：
- 动画中优先用
transform: translateX()等 GPU 加速属性 - 用
calc()控制初始尺寸或容器约束，而非逐帧偏移量 - 在 Safari 15.4 之前，
calc()用于grid-template-columns的某些组合有渲染 bug，建议加简单测试用例验证
真正难的是平衡表达力和可读性 —— 一个嵌了三层减法和两个变量的 calc() 表达式，修 bug 的人可能得花三分钟反推本意。
