calc()中加减运算要求单位类型一致，如100%与20px混用会报错，因浏览器无法统一基准；乘除则允许单位混合，如100% * 2或20px / 2合法。
calc() 里加减乘除的单位混用为什么报错
因为 calc() 要求加减运算的两边必须是**同类型可计算单位**，不能一边是 px、一边是 % 或 em —— 浏览器无法在运行时把它们对齐到同一基准。
常见错误现象：width: calc(100% - 20px); 看似合理，但某些旧版 Safari（margin: calc(1rem + 2px); 在部分安卓 WebView 中失效。
- 加减运算必须单位一致：可用
px/em/rem/%单独出现，但不能交叉混用（100% - 20px合法，但依赖浏览器实现；1rem - 10px不推荐） - 乘除只允许一个值带单位：如
calc(100% / 3)、calc(20px * 2)可行，calc(100% * 2px)语法错误 - 空格不能省：
calc(100%-20px)是无效的，必须写成calc(100% - 20px)
用 calc() 实现“容器宽度减去固定侧边栏”的响应式布局
这是最典型也最容易翻车的场景：主内容区要自动填满剩余空间，但又得避开左侧固定宽 240px 的导航栏。
直接写 width: calc(100% - 240px); 看似没问题，但实际中常因父容器没设 box-sizing: border-box 或含 padding 导致计算偏差；更关键的是，如果导航栏用了 position: fixed，主内容区还得额外补上 margin-left，否则文字会重叠。
立即学习“前端免费学习笔记（深入）”；
- 优先用
flex或grid替代纯calc()布局，更健壮 - 若必须用
calc()，确保父容器padding已被归入计算：比如父容器有padding: 0 16px，那主内容区应写width: calc(100% - 240px - 32px) - 别忘了处理最小宽度：加
min-width: 0;防止 flex 子项在收缩时溢出
calc() 和 CSS 变量一起用时的兼容性陷阱
calc() 支持变量，但不是所有浏览器都支持「变量参与计算」—— 尤其是 Safari 15.4 之前版本，calc(var(--gap) * 2) 会被整个忽略，而不是只忽略乘法部分。
使用场景多见于主题切换或断点适配：比如通过 JS 切换 --base-size，再用 calc(var(--base-size) * 1.5) 控制字体大小。这时候一旦变量未定义或类型不对（比如传了字符串 "16px" 而非数字），整个表达式就失效。
- 变量必须是合法数值单位：定义时写
--gap: 12px;，不要写--gap: "12px"; - 旧版 Safari 对嵌套变量计算支持差，建议降级为：先定义
--gap-double: 24px;，再直接用calc(100% - var(--gap-double)) - 可通过
@supports (width: calc(var(--x)))做特性检测，但注意它不检测计算是否真正生效
calc() 在 transform、margin、gap 等非 width 场景下的表现差异
不是所有属性对 calc() 的支持程度一样。比如 transform: translateX(calc(50% - 20px)); 在 Chrome 和 Firefox 中完全 OK，但在 iOS 15.6 的 Safari 中，如果页面缩放或存在 iframe，可能触发渲染抖动；而 gap: calc(1rem + 4px); 在 Grid 布局中从 Firefox 89+ 才开始支持，Edge 18 完全不认。
-
margin/padding：全平台支持好，但注意负值在某些 flex 场景下会改变主轴方向行为 -
transform：支持度高，但避免在动画中高频更新含calc()的transform，性能不如预计算好的数值 -
gap：仅现代浏览器支持，且不接受百分比（gap: calc(5%);无效） -
font-size：可以，但需注意calc(1rem * 1.2)这种写法在部分安卓浏览器中解析异常，稳妥写法是calc(1.2rem)
复杂点在于：calc 的计算发生在布局阶段，但它的结果可能被后续的盒模型、层叠上下文或缩放干扰。最常被忽略的是——它不感知父元素的 zoom 或 transform: scale()，那些缩放不会反向作用于 calc 内部的数值。
