calc()运算符前后必须留空格，否则声明失效；遵循数学优先级，括号内单位须一致；safari旧版本需-webkit前缀；absolute定位推荐left:50%+transform:translatex(calc(-50%+n))替代硬算宽度。
calc() 里运算符前后必须留空格
写成 top: calc(50%-30px) 就会失效，浏览器解析成两个独立值 50% 和 -30px，直接丢弃整条声明。必须写成 top: calc(50% - 30px) —— 减号两边各一个空格，加减乘除都一样。
常见错误场景：VS Code 自动格式化关了、手敲漏空格、从文档复制时丢失空格。用浏览器开发者工具检查 computed styles，如果看到 top: auto 或根本没这条，先查空格。
百分比和像素混算时，优先级与括号要明确
calc() 遵循标准数学优先级：* 和 / 先于 + 和 -。比如 left: calc(100% / 2 - 20px) 等价于 left: calc(50% - 20px)；但 left: calc(100% / (2 - 20px)) 会报错 —— 括号里不能出现单位不匹配的混合运算。
- 合法：
width: calc(100% - 2 * 16px) - 非法：
width: calc(100% - (16px + 2em))（不同单位不能在括号内相加） - 安全写法：
left: calc(50% - 16px)比left: calc(100% / 2 - 16px)更直观，也更少出错
transform 里的 calc() 要小心 Safari 兼容性
像 transform: translateX(calc(-50% + 16px)) 这种写法，在旧版 Safari（≤15.4）里不支持，必须加 -webkit-transform 前缀：
transform: translateX(calc(-50% + 16px)); -webkit-transform: translateX(calc(-50% + 16px));
注意：不是所有带 calc() 的 transform 都需要前缀，但涉及百分比偏移的 translateX/translateY 最容易踩坑。可以用 caniuse 查当前支持率，2026 年多数新项目已可省略，但若需兼容 iOS 15 及更早设备，仍得加。
absolute 定位中 calc() 和 transform 搭配更可靠
单纯用 left: calc(50% - 150px) 要求你知道元素确切宽度（比如 150px），一旦宽度变（响应式、字体缩放、内容增减），偏移就错。更健壮的做法是：
-
left: 50%把左边缘拉到容器中心 -
transform: translateX(-50%)把自身向左挪自身宽度一半 → 实现真居中 - 再叠加偏移：
transform: translateX(calc(-50% + 16px))
这样完全摆脱对具体像素宽的依赖，calc() 只负责“微调”，而不是扛起整个定位逻辑。很多开发者卡在第一步就硬算宽度，其实绕开它反而更稳。
实际写的时候，最容易被忽略的是空格和 Safari 前缀 —— 尤其当样式在开发环境看着正常，上线后某几台 iPhone 上突然错位，大概率就是这两处漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
