calc()加减号前后必须有空格，否则浏览器将其视为非法值而静默丢弃整条声明；乘除号虽无强制要求，但统一加空格可避免预处理器错误和兼容性问题。
calc()加减号前后必须有空格，否则整条声明被浏览器静默丢弃
这是 calc() 失效最普遍的原因：浏览器 CSS 解析器把 100%-20px 当作一个非法维度值（类似拼错的单位），直接跳过该声明，控制台不报错，你只看到“样式没变”。它不是兼容性问题，而是语法硬性要求。
加减号需要空格，是因为要区分负数和减法。比如 calc(100% + -20px) 是合法的（+ 后跟负值），没有空格就无法解析意图。
-
width: calc(100% - 20px)✅ 正确 -
margin-left: calc(-50% + 10px)✅ 正确（负号是数值一部分，+ 前后仍需空格） -
height: calc(100vh-30px)❌ 无效，整个声明被忽略 -
left: calc(-50%+10px)❌ 同样无效，+缺少左侧空格
乘除运算符虽无强制空格要求，但统一加空格可避免记忆混淆和预处理器错误
* 和 / 在规范中不要求空格，但实际使用中加空格更安全——尤其在 Less、Sass 等预处理器里，不加空格可能触发变量提前计算或单位换算逻辑。
-
width: calc(4 * 25%)✅ 浏览器原生支持，但 Less 会把它当作乘法运算，编译成width: calc(100%) -
width: calc(4 * 25%)✅ 加空格后，Less/Sass 更大概率保留原样交给浏览器执行 -
font-size: calc(1rem / 1.2)✅ 安全写法；calc(1rem/1.2)在某些旧版 WebView 中可能失败
0 必须带单位，否则 calc 表达式类型推导失败
calc() 接收的是数学表达式，每个操作数都需有明确类型（长度、角度、频率等）。0 是个纯数字，浏览器无法判断它代表 0px 还是 0% 或 0em，于是整个表达式失效。
-
padding: calc(0px + 12px)✅ 明确为长度类型 -
margin: calc(0% + 8px)✅ 允许混合单位（但注意浏览器兼容性） -
top: calc(0 + 10px)❌ 无效，0无单位 -
line-height: calc(0 + 1.5)❌ 同样无效，line-height虽无单位，但 calc 内部仍需类型一致
在 Less/Sass 中写 calc()，变量必须显式插值且包裹引号或转义
预处理器会先解析 $var 或 @var，再拼进 CSS。如果直接写 calc(100% - $gap)，Less 可能把它当作减法运算（如 100% - 12px → 88px），Sass 可能报错或降级为静态值。
- Less 中：
width: calc(~"100% - @{gap}");或width: calc(100% - #(@gap)); - Sass 中：
width: calc(100% - #{$gap}); - SCSS 中若用函数返回值：
width: calc(100% - #{px2rem(20px)}); - 绝对不要写：
width: calc(100% - $gap);—— 这在多数版本中都会出错
真正容易被忽略的是：空格问题不是“有时候不生效”，而是“永远不生效”——它不报错、不警告，只安静地跳过整条规则。你在调试时盯着元素 computed 样式却找不到那行 calc，大概率就是这里漏了空格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
