calc()加减号前后必须有空格，否则声明静默失效；乘除需一侧为纯数字；嵌套calc()在旧safari中不支持；单位混用在ie11等旧环境中整条规则丢弃。
calc()加减号前后没空格就静默失效
浏览器对 calc() 的语法校验非常严格，+ 和 - 运算符两侧**必须有空格**，否则整条声明被丢弃，DevTools 里只显示 Invalid property value，不报错也不提示。
-
calc(100% - 20px)✅ 正确 -
calc(100%-20px)❌ 失效（连 Safari 16 都不认） -
calc(100% -20px)❌ 失效（减号后缺空格） -
*和/虽然规范允许无空格，但统一加空格能避免手误和团队协作歧义：calc(1rem * 2)
乘除运算必须有一侧是纯数字
calc() 不允许单位与单位相乘或相除，比如 20px * 20px 或 100vh / 20px 直接非法。它只接受「带单位 × 纯数字」或「带单位 ÷ 纯数字」。
-
calc(var(--gap) * 2)✅ 前提是--gap: 20px -
calc(var(--gap) * var(--scale))⚠️ 风险高，--scale必须定义为纯数字（如1.5），不能带单位 -
calc(100% * 0.8)❌ 百分比不是“可缩放单位”，不能参与乘除——只能用于加减 - 想实现比例缩放，得拆成两个变量：
--base: 100%+--ratio: 0.8→ 用 JS 或构建时算死，别硬塞进calc()
嵌套 calc() 在旧版 Safari 和安卓 WebView 中直接被忽略
calc(calc(100% - 20px) / 3) 这类写法在 Safari 15.4 之前完全不支持，也不会 fallback，样式直接消失。更糟的是，@supports (width: calc(0px)) 检测不出嵌套能力，它只管顶层是否支持 calc()。
- 替代方案：用 CSS 自定义属性存中间结果：
--content-width: calc(100% - var(--gap))，再在元素中width: calc(var(--content-width) / 3) - 不要在
clamp()里塞多层calc()，比如clamp(320px, calc((100vw - 200px) / 3 * 2), 600px)，解析负担大，动画卡顿风险高 - Grid 中慎用
calc(1fr - 20px)：1fr 是动态分配份额，减像素后可能归零或负值，实际效果不可控
单位混用在 IE11 和部分安卓 WebView 中整条规则失效
calc(1rem + 20px) 或 calc(100vh - env(safe-area-inset-bottom)) 在现代浏览器没问题，但在 IE11、Android 4.4 WebView、某些鸿蒙旧版内核里会静默丢弃整条样式规则——且无法用 @supports 精准检测。
- 真要兼容，就得在构建阶段降级：PostCSS 流程必须是
postcss-custom-properties→postcss-calc（设preserve: false），顺序颠倒等于没做 - 移动端安全区适配别只靠
env()+calc()，加一层padding-bottom: 16px作为兜底 - 侧边栏留白这类场景，优先考虑 Flex/Grid 布局（
flex: 1+ 固定宽 sidebar），比calc(100% - 240px)更健壮
复杂点不在函数本身，而在浏览器对“非法表达式”的处理方式：不是报错，而是沉默跳过。你看到布局不对，第一反应不该是逻辑错了，而是检查空格、单位、嵌套层级和目标环境的真实支持范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
