calc()失效主因是加减号两侧缺空格、0未带单位、预处理器误解析或父容器高度未设；正确写法如calc(100% - 20px)和calc(0px + 100px)，并避免Less/Sass提前计算。
calc() 失效，八成是因为加减号没空格——不是兼容性问题，是语法直接被浏览器丢弃。
加减号两侧必须有空格，否则整条声明静默失效
浏览器解析 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)——编译后仍是字面量，浏览器无法识别 - CSS 自定义属性用
var(--gap)没问题，但--gap值本身必须带单位，比如--gap: 20px，不能只写--gap: 20
父容器高度未设，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 没带单位 + 预处理器又插了一脚。它们各自单独出现时可能还能蒙混过关，凑在一起就彻底静默失效，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
