calc()中加减号两侧必须有空格，否则表达式失效；乘除号无需空格；嵌套变量或预处理器易遗漏空格；DevTools不报错但样式灰显，需查Computed值确认。
calc() 里加减号两侧必须有空格
直接写 width: calc(100%-20px) 会完全失效，浏览器解析时把它当做一个非法值丢弃，最终回退到默认宽度（比如 auto）。这是因为 CSS 规范强制要求 + 和 - 运算符前后**必须各有一个空格**，而 * 和 / 不需要。
-
calc(100% - 20px)✅ 正确（减号两侧有空格） -
calc(100%+20px)❌ 解析失败（加号无空格） -
calc(100% * 2)✅ 正确（乘号无需空格） -
calc(100%/2)✅ 正确（除号无需空格）
嵌套 calc() 或混用变量时容易漏掉空格
当把 var(--gap) 套进 calc() 里做减法，很容易只顾着写变量，忘了运算符空格。比如：
.box { width: calc(100% - var(--gap)); }这看着很自然，但如果你的 --gap 是 1rem，实际展开就是 calc(100% - 1rem) —— 空格还在，没问题；可一旦你手快写成：
.box { width: calc(100%-var(--gap)); }那就立刻失效。更隐蔽的是在预处理器（如 Sass）里拼接字符串，空格可能被自动 trim 掉。
立即学习“前端免费学习笔记（深入）”；
浏览器报错不明显，靠 computed 值反推最可靠
calc() 失效时 DevTools 通常**不报红错误**，只是在 Styles 面板里把那行灰掉，Computed 面板中对应属性显示为初始值（比如 width: auto）。这时候别猜，直接看 Computed 标签页里的 width 实际值——如果没按预期计算出来，第一反应就该检查空格。
另外注意：IE11 要求所有单位必须显式写出（0 得写成 0px），不过这个坑现在基本不用踩了。
空格不是风格问题，是语法铁律。少一个空格，整个表达式就废掉，而且毫无提示。
