calc()失效的根本原因是css规则被浏览器静默丢弃，主因包括：未启用定位上下文、父容器高度为auto导致百分比无基准、加减号缺空格、css变量单位错配、或作用于非定位元素。
calc()里写top: calc(50% - 20px)却没动，根本不是函数问题
它压根没被浏览器执行——整条 CSS 规则被静默丢弃了。原因通常是 top 所在元素没启用定位上下文，或者父容器高度为 auto，导致 50% 没有计算基准，直接变成 0，再减 20px 得到负值，浏览器直接忽略该声明。
必须同时满足两个条件：position: relative（或 absolute/fixed）+ 父容器有明确高度（如 height: 100vh、min-height: 100% 或固定像素值）。缺一不可。
- 检查 computed styles 中
top是否显示为auto或完全不出现——这是最直接的失效信号 - 用 DevTools 逐级点开父元素，确认
html → body → .parent每一层都设置了height: 100%或等效值 - 避免依赖
100%：改用100vh更可靠，比如top: calc(100vh - 80px)
加减号前后少一个空格，整个calc就报废
top: calc(50%-20px) 和 top: calc(50% - 20px) 看起来只差空格，但前者会被解析器判定为非法 token，整条规则作废，DevTools 里连划掉的痕迹都不会留。
浏览器无法区分 - 是运算符还是负号，没有空格时，它会把 50%-20px 拆成 50% 和 -20px，而 -20px 不是合法单位值，直接跳过整条声明。
- 所有
+、-运算符两侧必须有空格，*、/建议也加上，统一风格更安全 - VS Code 自动格式化可能关掉了 CSS 空格补全，手敲时尤其容易漏
- 复制文档代码时，有些网页会把空格转成 或直接吃掉，务必手动检查
用CSS变量传百分比，单位错配会让calc直接哑火
写 --offset: 50%，再用 top: calc(100% - var(--offset))，看似天衣无缝，实际展开后是 calc(100% - 50%) —— 这条能跑；但如果父容器是 height: auto，那 100% 就是 0，结果仍是 -50%，浏览器照样无视。
更危险的是混维度：比如 top: calc(100vh - var(--offset))，100vh 是视口高度单位，--offset 是百分比（相对包含块高度），两者类型不兼容，表达式直接被判非法。
- 变量值必须带单位，且与参与运算的其他项维度一致（同为 %、同为 vh、同为 px）
- 不要用变量存纯数字比例（如
--ratio: 0.5），要用就显式转成单位：calc(var(--ratio) * 100%) - 设 fallback：
top: calc(100% - var(--offset, 20px))，防止变量未定义时整条失效
img 或 inline 元素上直接写 left/top，calc再准也没用
<img src="x.jpg" style="max-width:90%"> 一定不动。因为 <img> 默认是 display: inline，left、top 这类定位属性对非定位元素完全无效，浏览器直接忽略，根本不会走到 calc 解析那步。
即使加了 position: absolute，如果父容器没设 position: relative，那 left: 50% 就会相对于初始包含块（通常是视口）计算，和你预期的“相对父盒居中”完全不是一回事。
- 先确保元素已定位：
position: relative（自身偏移）或position: absolute（相对父级偏移） - 父容器必须设
position: relative（或absolute/fixed），否则left/top的百分比基准就错了 - 真要居中，优先用
left: 50%; transform: translateX(-50%)，比硬算宽度更稳定
真正卡住人的，从来不是 calc 能不能算，而是它连被算的机会都没有——空格漏了、定位没开、父高塌了、单位乱了，四者任一出问题，浏览器就当这行 CSS 不存在。调试时别急着改公式，先看 computed 样式里有没有它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
