calc()单位混用在加减中必须同类型，乘除可混；括号需显式声明优先级；grid/flex中依赖容器基准；css变量需带单位；现代方案如aspect-ratio、clamp()更优。
calc() 里单位混用会直接失效
浏览器对 calc() 的单位校验非常严格：加减运算的左右两边必须是**同类型单位**，或者其中一边是无单位数字（仅限乘除场景）。写成 calc(100px + 2rem) 看似合理，但多数旧版 safari 和部分 android webview 会直接忽略整个声明，元素宽高退回到初始值。
常见错误现象：width: calc(100% - 20px) 在某些嵌套 flex 容器中不生效，实际是父容器没设 width 或 max-width，导致百分比基准为 0；不是 calc 本身错了，而是上下文缺失。
- 加减只允许同单位组合：如
100% - 20px、50vw + 1em，但100px + 1em在部分环境不可靠 - 乘除支持混合单位：
calc(100% * 0.5)、calc(20px * 2)、calc(1fr / 2)都合法 - 括号必须显式写出优先级：
calc(100% - 20px * 2)≠calc((100% - 20px) * 2)，后者才符合预期
calc() 在 Grid 和 Flex 布局中的实际边界
calc() 能用在 grid-template-columns 或 flex-basis 里，但不是所有地方都“真动态”。比如 grid-template-columns: calc(100% - 200px) 200px，看起来左边自适应，其实它依赖于网格容器自身的宽度计算时机——如果容器宽由内容撑开（width: fit-content），calc 里的百分比可能按 0 计算，结果整行塌陷。
使用场景上，它最适合已知基准的固定上下文：容器有明确 width、max-width，或使用视口单位（vw/vh）。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: 1fr calc(300px - 2rem)可行，但1fr实际分配剩余空间时，不会重新触发calc再计算 -
flex-basis: calc(50% - 10px)在flex-wrap: wrap下可能因换行导致基准宽度突变，视觉错位 - 避免在
@media外层用calc模拟响应式：不如直接在媒体查询里重写属性值，更可控
calc() 和 CSS 自定义属性一起用的坑
可以写 --gap: 20px; width: calc(100% - var(--gap));，但注意：CSS 变量本身不支持单位运算，var(--gap) 必须带单位（如 20px），不能只存数字 20。否则 calc(100% - var(--gap)) 会被当成 calc(100% - 20)，语法错误，整条声明失效。
性能影响很小，但兼容性要留意：IE 完全不支持 var()，而 calc() 在 IE9+ 支持，两者叠加就掉到 IE11 才可用。
- 变量值必须含单位：
:root { --pad: 16px; }✅，--pad: 16;❌ - 运算符前后必须有空格：
calc(100% - var(--pad))✅，calc(100%-var(--pad))❌（部分浏览器报错） - 不能在
var()里嵌套calc()：--size: calc(100px / 2);合法，但var(--size)只能当原始值用，不能再参与外层calc
替代 calc() 的现代方案：什么时候该放弃它
当需求变成“根据内容自动缩放”或“等比拉伸”，calc() 就力不从心了。比如让一个卡片高度始终等于其宽度（正方形），height: calc(100% * 1) 没用，因为百分比高度依赖父元素有明确高度。这时候该用 aspect-ratio: 1 / 1 —— 更简洁、可继承、支持响应式断点覆盖。
容易被忽略的是：很多你以为需要 calc() 的场景，其实用 minmax()、clamp() 或原生逻辑属性（inline-size、block-size）更稳。
-
width: clamp(300px, 80%, 1200px)比三层媒体查询 +calc组合更轻量 -
grid-template-rows: minmax(min-content, max-content)能替代不少“预估高度 + calc 补差”的 hack - 涉及字体缩放时，优先用
rem或em直接相对，别用calc(1rem * 1.2)—— 多余且难维护