calc() 失效主因是加减号缺空格、0缺单位、预处理器未插值及父容器高度未设；必须保证运算符两侧有空格、0带单位、sass/less变量正确插值、父元素有明确高度基准。
calc() 不生效，八成不是浏览器兼容性问题，而是语法被解析器直接丢弃——加减号两侧没空格，整条 CSS 声明就静默失效。
加减号前后必须有空格，否则整条声明被跳过
浏览器解析 calc() 时，+ 和 - 是歧义符号：可能是运算符，也可能是数值的正负号。没有空格，它会把 100%-20px 拆成 100% 和 -20px，而 -20px 不是合法单位，整个表达式被判为非法 token，直接跳过。
-
width: calc(100% - 20px)✅ 正确 -
left: calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 -
height: calc(100vh-30px)❌ 整条规则不生效，DevTools 里都看不到它 -
margin: calc(100%+20px)❌ 同样无效，+左侧缺空格
0 必须带单位，否则类型推导失败
0 在 calc() 里不是数字常量，而是“无类型占位符”。浏览器无法判断它是 0px、0% 还是 0em，于是整个表达式罢工。
-
top: calc(0px + 10px)✅ 明确长度类型 -
padding: calc(0% + 12px)✅ 允许混合单位（注意兼容性） -
line-height: calc(0 + 1.5)❌0无单位，line-height虽无单位，但calc()内部仍需类型一致 -
height: calc(0 + 50vh)❌ 必须写成calc(0vh + 50vh)或calc(0px + 50vh)
Sass/Less 中变量必须插值或转义，否则预处理器提前计算
Sass 和 Less 在构建阶段就处理变量，不插值的话，calc(100% - $gap) 可能被编译成 calc(80%) 或 calc(100% - 20)，单位丢失或逻辑错乱。
- Sass 正确写法：
width: calc(100% - #{$gap});（$gap必须含单位，如$gap: 20px） - Less 正确写法：
width: calc(~"100% - @{gap}");或较新版本支持的width: calc(100% - @{gap}); - 绝对不要写：
calc(100% - $gap)或calc(100% - @gap)——编译后仍是字面量，浏览器无法识别
父容器高度未设，100% 就是 0
calc(100% - 60px) 看似合理，但如果父元素 height 是 auto 或根本没设，那这个 100% 就没基准，结果是 0 - 60px = -60px，浏览器直接忽略该声明。
- 常见场景：Vue/React 组件里给
.content设height: calc(100vh - 80px)，但它的父级.layout没设height: 100%，导致高度塌陷 - 验证方式：打开 DevTools，看该元素的 computed
height是否为具体像素值；如果不是，就逆向查html→body→ 直接父容器 - 更健壮写法：
height: calc(100vh - 80px)——用视口单位避开百分比依赖，但要确认是否符合布局意图
真正容易被忽略的是三重叠加问题：空格没加 + 0 没带单位 + 预处理器又插了一脚。你看到 DevTools 里 calc() 没生效，先搜源码里有没有 #{$ 或 ~"，再检查编译后 CSS 里空格和单位是否完整，最后往上翻三层父容器的高度设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
