calc()不生效主因是加减号两侧缺空格、0未带单位、预处理器误解析或父容器高度未设；正确写法如calc(100% - 20px)和calc(0px + 100px)，并避免less/sass提前计算。
calc()不生效，大概率是运算符没空格
加减号 + 和 - 两侧必须有空格，否则整个表达式会被浏览器直接忽略——不是计算错，是压根不解析。比如 calc(100%-50px) 在 Safari iOS 14 之前、Android WebView 旧内核里会完全失效，样式回退到未定义状态。
乘除号 * 和 / 虽然规范允许不加空格（如 calc(100%*0.8)），但为了一致性和避免预处理器干扰，建议统一加上空格：calc(100% * 0.8)。
- 错误写法：
width: calc(100%-20px); - 正确写法：
width: calc(100% - 20px); - 更安全的写法（尤其混用变量时）：
width: calc(100% - 20px + 0px);—— 后面补个带单位的0px能进一步防止解析歧义
0 必须带单位，否则 calc 直接罢工
0 在 calc() 里不是数字常量，而是“无类型占位符”。浏览器无法推断它是 0px、0% 还是 0em，所以会丢弃整个声明。你写 calc(0 + 100px)，结果就是样式不生效；换成 calc(0px + 100px) 才行。
- 错误：
height: calc(0 + 50vh); - 正确：
height: calc(0vh + 50vh);或height: calc(0px + 50vh);（只要单位合法且可参与运算） - 注意：
0rem、0em、0%都可用，但别用0单独出现
Less/Sass 中 calc 被预处理器提前计算了
Less 会把 calc(100% - 50px) 当作自己的算术表达式处理，直接算成 calc(50%)；Sass 同理，可能把变量代入后错误换算单位。这不是 CSS 层的问题，是构建阶段就被改写了。
- Less 正确写法：
width: calc(~"100% - 50px"); - Sass/SCSS 正确写法：
width: calc(#{"100% - 50px"}); - 变量代入时也得绕过：
@w: 50px; width: calc(~"100% - @{w}");
父容器高度未设，子元素 calc(100% - X) 白写
100% 是相对父元素计算的。如果父容器没显式设高（比如 height: auto 或没设 height），那 100% 就是 0，整个 calc(100% - 60px) 算出来还是负值或无效值，浏览器会忽略该声明。
- 常见场景：Vue/React 组件里给
.content设height: calc(100vh - 80px)，但它的父级.layout没设height: 100%，结果高度塌陷 - 修复方式：逐级向上确认，至少保证
html、body、直接父容器都有height: 100%或固定高度 - 更健壮写法（避开百分比依赖）：
height: calc(100vh - 80px);—— 用视口单位替代父级百分比，但需确认是否符合布局意图
真正容易被忽略的是三重叠加问题：空格没加 + 0 没带单位 + 预处理器又插了一脚。线上环境一旦出问题，往往不是单点失效，而是多个条件同时触发导致整条规则静默丢弃。调试时别只盯着浏览器 DevTools 里“划掉”的样式，先看 computed 值是不是 auto 或空，再倒查源码和构建产物。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
