calc()失效主因是加减号缺空格、0缺单位、变量未插值及父容器高度未设；必须保证运算符两侧有空格、0带单位、css/sass变量正确包裹或插值、父元素有明确高度基准。
加减号前后缺空格，整条声明被静默丢弃
浏览器解析 calc() 时，+ 和 - 是歧义符号：既可能是运算符，也可能是数值的正负号。没空格，它会把 100%-20px 拆成 100% 和 -20px，而 -20px 不是合法单位，整个表达式被判非法，整条 CSS 声明直接跳过，DevTools 里都看不到。
-
width: calc(100% - 20px)✅ 正确 -
left: calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 -
height: calc(100vh-30px)❌ 整条规则不生效 -
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)
CSS 变量或预处理器变量未正确插值
--gap 或 $gap 这类变量名裸写进 calc() 会被当作文本字面量处理，不是值，整条声明因语法错误被丢弃。
-
width: calc(100% - var(--gap))✅var()必须包裹，且--gap: 20px定义必须带单位 -
width: calc(100% - #{$gap})✅ Sass 插值，$gap: 20px也必须含单位 -
width: calc(100% - $gap)❌ Sass 编译后仍是字面量，浏览器无法识别 -
width: calc(100% - --gap)❌ 少var()，CSS 解析器按未知标识符处理
父容器高度未设，百分比失去基准
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(100dvh - 80px)—— 用动态视口单位避开地址栏抖动和百分比依赖
真正容易被忽略的是三件事：空格不是可选格式习惯，而是语法必需；0 不是例外，它必须带单位；var(--x) 返回的是字符串，不是“带单位的数”，单位得在定义时就焊死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
