calc()用于定位时需注意单位兼容、空格规范、变量fallback及IE兼容性，失败为静默丢弃。正确用法：单位混合合法（如50%-20px）、运算符两侧加空格、var()必带fallback（如var(--w,200px)），避免无单位值混用。
calc() 在 CSS 定位中能解决「动态偏移 + 固定尺寸」类问题，但直接套公式很容易失效——根本原因不是语法写错，而是单位混用、空格缺失或变量未 fallback 导致整个声明被浏览器静默丢弃。
calc() 用于 left/top/right/bottom 时的单位兼容性
定位属性（left、top 等）只接受 length 或 %，所以 calc() 结果必须能解析为其中之一。常见错误是把 % 和 px 直接加减却忽略上下文限制：
-
top: calc(50% - 20px)✅ 合法：父容器高度确定时，50%可转为像素再运算 -
left: calc(50% + 1rem)✅ 合法：rem 是长度单位，与 % 混合在left中被允许 -
top: calc(50vh - 20px)✅ 合法：vh是视口单位，参与计算无问题 -
right: calc(100% - 2em)❌ 风险高：若父元素font-size未定义，2em无法解析，整个right值回退为初始值（如auto）
绝对定位居中偏移时 calc() 的空格与括号陷阱
写 left: calc(50% - 100px) 看似简单，但实际部署常因两个细节崩掉：
- + 和 - 两侧**必须有空格**：
calc(50%-100px)会被解析为非法维度值，浏览器直接忽略该声明 - 乘除虽不强制空格，但
calc(50% / 2)比calc(50%/2)更易读且避免解析歧义 - 涉及多层优先级时括号不能省：
left: calc(50% - (100px / 2))正确；left: calc(50% - 100px / 2)会先算100px / 2再减，结果一样但可读性差，容易误改
用 CSS 变量配合 calc() 做可配置定位时的 fallback 必须写全
一旦引入 var(--offset)，整个 calc() 就变成脆弱链路——任一变量未定义，整条计算就断。比如想让弹窗水平居中并右偏 --shift：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
left: calc(50% - var(--width) / 2 + var(--shift))—— 若--width未声明，var(--width)返回空字符串，calc()失效 - ✅ 正确写法：
left: calc(50% - var(--width, 200px) / 2 + var(--shift, 0))—— 所有var()都带 fallback，保证至少有默认值参与运算 - ⚠️ 注意：
var(--shift, 0)中的0是无单位数字，不能写成0px（否则50% + 0px在部分旧引擎中可能报错）
IE 兼容性与现代布局替代建议
IE9–11 支持 calc()，但存在已知 bug：对 vh/vw 单位计算不稳定，且不支持变量。如果你仍需兼容 IE：
- 不要用
calc(50vh - var(--header-height))这类组合，改用 JS 动态设置内联样式 - 现代项目中，
position: absolute+calc()居中正在被transform: translate()和 Flex/Grid 替代——后者更健壮、无需单位换算、无 fallback 压力 - 真正需要 calc() 的定位场景只剩少数：比如固定侧边栏宽度下主内容区的
margin-left，或响应式导航项间距动态缩放
最常被忽略的一点：calc() 的失败是静默的——它不会报错，只是让属性回到初始值。调试时务必检查 computed styles，而不是只看 styles 面板里的声明是否“存在”。
