calc()不生效主因是加减号缺空格致整条声明被静默丢弃；0必须带单位；预处理器需插值；父容器未设高会使100%为0。
calc() 计算结果“不正确”，90% 是压根没算——浏览器直接跳过了整条声明，不是算错了，是根本没解析。
加减号两侧没空格，整个 calc 被静默丢弃
浏览器解析器看到 100%-20px 会当作一个非法 token（类似拼错的单位），立即忽略该 CSS 声明。控制台不报错，DevTools 里也看不到这条样式。
-
width: calc(100% - 20px)✅ 正确 -
width: calc(100%-20px)❌ 无效，整条失效 -
margin-left: calc(-50% + 10px)✅ 负号属于数值，+ 前后仍需空格 -
left: calc(50%+-10px)❌ + 左侧缺空格，-10px 不被识别为合法值
0 必须带单位，否则类型推导失败
0 在 calc() 里不是数字，而是“无类型占位符”。浏览器无法判断它是 0px、0% 还是 0em，于是整个表达式作废。
-
padding: calc(0px + 12px)✅ 明确长度类型 -
top: calc(0 + 10px)❌ 无效，0无单位 -
line-height: calc(0rem + 1.5)✅ 只要单位合法且可参与运算，0rem、0vh、0%都行
Sass/Less 中变量未插值，calc 被预处理器提前改写
Sass 和 Less 在构建阶段就把 calc(100vh - $height) 当成自己的算术表达式处理，可能输出 calc(80vh) 或 calc(100vh - 20) —— 后者单位丢失，运行时直接失效。
- Sass 正确写法：
width: calc(100% - #{$gap});（$gap必须含单位，如$gap: 20px） - Less 正确写法：
width: calc(~"100% - @{gap}"); - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)
父容器高度未设，100% 算出来就是 0
calc(100% - 60px) 的 100% 是相对父元素高度计算的。如果父级是 height: auto 或没设高度，那 100% 就是 0，整个表达式变成 calc(0 - 60px) → 负值 → 浏览器忽略该声明。
- 常见场景：
.content { height: calc(100vh - 80px); }生效，但若它在.layout内，而.layout没设height: 100%，就会塌陷 - 修复方式：逐级确认
html、body、直接父容器是否都有显式高度 - 更健壮写法：
height: calc(100vh - 80px);（用视口单位避开百分比依赖）
真正容易被忽略的是三重叠加：空格漏了 + 0 没带单位 + 预处理器又插了一脚——这三者同时存在时，你检查计算逻辑、查兼容性、看 DevTools 都找不到问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
