calc() 计算精准，但不准源于未明确盒模型上下文：默认 content-box 下需手动减去 padding/border，或改用 border-box 并避免重复扣除；flex/grid 中 width 常被 flex-basis/轨道逻辑覆盖；语法要求严格（空格、单位、乘除规则）；变量未定义或嵌套过深会导致静默失效。
calc() 本身算得准，不准的是你没告诉浏览器“这个结果要塞进哪一层盒模型里”——它只管 content 宽度，而你常在想总宽、留白或对齐效果。
box-sizing 没设成 border-box，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？那就得把所有开销塞进表达式：width: calc(100% - 2 * 12px - 2 * 1px)
Flex 或 Grid 里 width: calc() 被 flex-basis 或轨道逻辑覆盖
在 Flex 子项上写 width: calc(100% - 240px) 却没反应？大概率是 flex-basis 在起作用——它优先级高于 width，默认值 auto 会直接取 width 声明，但一旦你设了 flex: 1，flex-basis 就被重置为 0%，width 彻底失效。
- 真正生效的写法是：
flex-basis: calc(100% - 240px) - 确保父 Flex 容器有明确宽度（比如
width: 100%或max-width: 100vw），否则子项的100%基准为 0 - Grid 中类似：若用了
grid-column: 1 / -1，width也会被忽略
单位混用 + 运算符空格缺失 = 整条声明静默丢弃
移动端和旧版 Safari 对语法极其敏感：calc(100%-20px)（无空格）、calc(0 + 100vw)（0 没单位）、calc(var(--gap) * 2px)（乘法右侧带单位）都会导致整条 CSS 规则被跳过，DevTools 里那行样式直接灰掉，毫无提示。
-
+和-两侧必须有英文空格：calc(100% - 20px)✅，calc(100%-20px)❌ - 变量值必须带单位：
--gap: 20px✅，--gap: 20❌；0更危险：--offset: 0px✅，--offset: 0❌ - 乘除有硬约束：
calc(var(--w) * 2)✅，calc(var(--w) * 2px)❌；calc(100px / 2)✅，calc(100px / 2px)❌
嵌套 calc + 变量未定义 = 调试黑洞
calc(calc(100% / var(--cols)) - 2em) 这类写法浏览器能解析，但任意一环变量未定义（比如 --cols 没声明，或 env(safe-area-inset-bottom) 在桌面端为空），整条声明就静默失效——无报错、无警告、Computed 值也不变。
- 避免三层以上嵌套；拆成自定义属性更可控，例如先定义
--col-width: calc(100% / 3) - fallback 必须靠层叠顺序：
width: 960px; width: calc(100vw - 40px); - 调试时先用固定值验证语法：
width: calc(400px - 20px)，再换回百分比
最易被忽略的点：calc() 的输出永远是 content 区尺寸，而你真正想控制的，常常是视觉边界、点击热区或与其他元素的对齐关系——这些都依赖于 box-sizing、上下文布局规则、单位一致性三者共同作用，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
