calc()不是实时计算器，仅在样式解析时计算一次；失效主因是加减号缺空格、单位混用不兼容、父容器尺寸未定义，导致整条声明被静默丢弃。
calc() 不是“实时计算器”，它只在样式解析时算一次；所谓动态，其实是靠视口变化、父容器重排或 CSS 变量更新触发重计算。新手最容易栽在空格、单位混用和布局上下文这三处。
加减运算为什么写了却没效果
浏览器遇到非法 calc() 会整条声明静默丢弃，开发者工具里该行变灰色划掉，但控制台不报错——你只会发现元素宽度/高度回退到默认值。
-
calc(100%-20px)缺空格 → 解析失败（必须写成calc(100% - 20px)） -
calc(100% + auto)含不可计算值 → 整条失效（auto、inherit、content都不能参与运算） -
calc(1rem - 10px)在旧版 Safari 或某些安卓 WebView 中可能被拒（建议统一换为px或vh/vw） - 百分比基准依赖父容器：如果父级没设
width或height，50%就按 0 算（比如top: calc(50% - 20px)失效，往往因为父容器没position: relative且无显式高）
乘除运算的单位铁律必须记牢
加减可以混单位（%、px、rem），但乘除有硬限制：违反就语法错误，CSS 引擎直接跳过。
- ✅ 乘法：只允许一个操作数带单位，另一个必须是纯数字 ——
calc(100% * 2)、calc(16px * 1.5) - ❌ 乘法：两边都带单位 →
calc(100% * 20px)、calc(1rem * 2em)都非法 - ✅ 除法：仅被除数可带单位，除数必须是纯数字 ——
calc(100% / 3)、calc(400px / 2) - ❌ 除法：除数带单位 →
calc(100% / 20px)、calc(1fr / 2rem)全部无效 - ⚠️
calc(var(--gap) * 2)要求--gap必须是带单位的合法值（如8px），空字符串或auto会让整条声明失效
和 CSS 变量配合时最常漏的三件事
变量不是响应式开关，calc() 也不监听变更——你得手动设值，且 fallback、作用域、括号一个都不能少。
立即学习“前端免费学习笔记（深入）”；
- 必须加 fallback：
width: calc(100% - var(--sidebar-width, 240px))，否则变量未定义时整条失效 - 作用域要窄：
.layout { --sidebar-width: 240px; }，别全塞进:root，否则多个组件互相覆盖 - 括号不能省：
width: calc((100% - 20px) / var(--count))，否则先算20px / var(--count)（除法优先级高于减法） - 别写成
calc(100% - var(--gap) px)—— 单位必须紧贴数值，2rem✅，2 rem❌
写了 calc 却被布局规则吞掉怎么办
不是函数写错了，而是更高优先级的布局机制覆盖了你的计算结果。
- Flex 项目中：
flex: 1或flex-grow: 1会无视width，得加flex: none或min-width: 0 - Grid 项里：
grid-column: 1 / -1这类跨度声明会覆盖width计算 - 父容器是
display: inline或浮动未清除 →100%没意义，calc结果自然无效 - 固定定位元素：
position: fixed的100%相对于视口，但100vw包含滚动条宽度（约 16px），calc(100vw - 32px)在有滚动条时仍可能溢出
真正难的不是写对语法，而是判断当前上下文是否支持你写的那个百分比或 rem 基准——它到底相对于谁？有没有被父级 layout mode 截断？这些没法靠查文档一眼看出，得打开开发者工具逐层看 computed styles 和 layout 树。
