calc() 本身无误差，问题源于未明确控制目标尺寸层：它只计算 content 宽度，而开发者常误以为控制总宽、留白或视口对齐；需配合 box-sizing: border-box 使用，且避免重复扣除 padding/border。
calc() 本身不产生误差，误差来自你没告诉浏览器“你要控制的是哪一层尺寸”——它只算 content 宽度，而你却在想总宽、留白或视口对齐。
calc() 输出的是 content 区，不是总宽
写 width: calc(100% - 40px) 后又加 padding: 12px 和 border: 1px，元素必然撑出父容器。因为默认 box-sizing: content-box 下，总宽 = content + padding + border。
- 想让“总宽 = 100% - 40px”，必须配
box-sizing: border-box - 用了
border-box就别在calc()里再减 padding/border，否则重复扣除 - 若坚持用
content-box，就得把所有开销塞进calc()：比如width: calc(100% - 2 * 12px - 2 * 1px)
百分比 + 固定单位混用时，基准可能失效
calc(100vw - 2rem) 在旧版 Safari 或某些 iOS WebView 中常计算错，因为 % 依赖父容器宽度，vw 是视口宽度，两者求值时机不同，浏览器可能取错快照。
- 优先同类型单位混算：
calc(100% - 2em)或calc(100vw - 2rem) - 跨上下文需求（如“占满视口但扣 header 高度”），改用
max-width+width: 100%组合，或用container查询配合clamp() - 父容器高度未设时，
calc(100% - 60px)的100%基准是 0 → 结果为-60px，整条声明被忽略
空格、单位、变量这三处最容易静默失效
旧版 WebKit（iOS Safari ≤15.3、Android 4.4 WebView）和 IE9+ 对语法极其敏感，错一个字符就整条丢弃，DevTools 里灰掉、Computed 值不变，毫无提示。
立即学习“前端免费学习笔记（深入）”；
-
+和-两侧必须有空格：calc(100% - 20px)✅，calc(100%-20px)❌ - 自定义属性参与运算时，值必须带单位：
--gap: 20px✅，--gap: 20❌（展开后变成100% - 20，单位缺失） -
0最危险：--offset: 0必须写成--offset: 0px或--offset: 0rem - 乘除有硬约束：右侧操作数必须是纯数字，
calc(var(--w) * 2)✅，calc(var(--w) * 2px)❌
嵌套 calc 和层叠 fallback 是调试黑洞
calc(calc(100% / var(--cols)) - 2em) 这类写法浏览器能解析，但任意一环变量未定义、环境变量（如 env(safe-area-inset-bottom)）缺失，整条声明静默失效，无报错、无警告。
- 避免三层以上嵌套；拆成自定义属性更可控，例如先定义
--col-width: calc(100% / 3) - IE10–11 支持
calc()，但拒识混合单位：100vw - 20px直接跳过，不是算错，是压根不解析 - fallback 必须靠层叠顺序：
width: 960px; width: calc(100vw - 40px);—— IE 遇到不认识的值会跳过后续同名声明，顺序不能颠倒 -
@supports (width: calc(100vw))在 IE11 下无效，它根本不支持该查询
真正卡住人的从来不是 calc() 能不能算，而是你没意识到它只管 content、不认视口变化、不处理盒模型溢出、也不告诉你哪里写错了——所有问题都藏在 DevTools 的 Computed 面板里那条灰掉的声明后面。
