calc()表达式失效的主因是空格缺失、单位缺失和父容器高度未定义。正确写法需空格分隔、变量带单位、父元素设height，旧浏览器需fallback。
它很可能根本没被浏览器解析——不是算错了，是压根没认出来。
calc() 里减号前后没空格
这是最常踩的坑。写成 calc(100%-20px) 时，CSS 解析器会把 %-20px 当作一个非法单位名（类似 abc123），整个表达式因语法错误被静默丢弃。
- ✅ 正确写法必须带空格：
calc(100% - 20px) - ❌ 错误写法：
calc(100%-20px)、calc(100% -20px)、calc(100%- 20px) - Sass/Less 中变量插值容易自动 trim 空格，务必用包裹语法：
calc(100% - #{$gap})（Sass）或calc(~"100% - @{gap}")（Less）
父容器高度未定义，100% 没基准
calc(100% - 20px) 里的 100% 是相对父元素高度的。如果父元素 height 是 auto 或没设，那这个 100% 就是 0，结果变成 -20px，浏览器直接忽略该声明。
- 常见于 Vue/React 组件：.content 设了
height: calc(100vh - 80px)，但它的父级没设height: 100% - 验证方式：打开 DevTools，看 computed height 是否为具体像素值；如果不是，就从
html→body→ 直接父容器逐层检查 - 更稳写法：
height: calc(100dvh - 80px)，避开地址栏抖动和百分比依赖
CSS 变量没带单位，var() 展开后类型不匹配
如果用了 calc(100% - var(--gap))，但 --gap: 20（没单位），那展开后就是 calc(100% - 20)——浏览器无法判断 20 是 20px 还是 20%，整条规则被丢弃。
- ✅ 必须让变量自带单位：
--gap: 20px、--offset: 0px（连0都不能省单位） - ❌
--gap: 20、--gap: 1rem（后者在加减中仍可能失败，因单位混用不被旧 Safari 支持） - PostCSS 不会自动展开
calc(var(--x))，postcss-custom-properties默认只处理顶层var()
旧浏览器对混合单位直接拒识
IE10–11 和部分旧版 Safari 并不真正支持“跨单位计算”。calc(100vw - 20px) 在 IE 中会被整个跳过，不是算错，是压根不解析。
- IE 安全写法靠层叠 fallback：
width: 960px; width: calc(100vw - 40px);（顺序不能颠倒） -
@supports (width: calc(100vw))在 IE11 中无效，它根本不支持该查询 - 涉及
height、padding等属性，每个都得单独设 fallback，不能只写一次
最容易被忽略的是：空格、单位、父容器高度这三者往往同时出问题，查一个就停，大概率漏掉另外两个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
