box-sizing 必须显式设置，否则 calc() 与 CSS 变量混用时尺寸会失控；未设 border-box 时 padding 和 border 会额外增加宽度，导致布局溢出。
box-sizing 必须显式设置，否则 calc() 与 CSS 变量混用时尺寸会失控——这是最常被忽略的前提。
box-sizing 不设，CSS 变量再准也没用
当你用 --gap: 16px 并写 width: calc(100% - var(--gap))，这个值只作用于 content 区。如果没设 box-sizing: border-box，而又有 padding: 12px 和 border: 1px solid，总宽就变成 100% - 16px + 24px + 2px，直接撑出容器。
- 所有参与布局的组件，建议统一加
* { box-sizing: border-box } - 若必须保留
content-box（如某些 legacy 表单控件），就得在calc()里手动扣掉 padding 和 border：width: calc(100% - var(--gap) - 2 * 12px - 2 * 1px) -
box-sizing不继承，子元素不会自动沿用父级设置，每个需布局的元素都得单独确认
var() 在 calc() 中的单位兼容性陷阱
var(--size) 若定义为无单位值（如 --size: 8），放进 calc(100% - var(--size)) 会报错；若定义为带单位但单位不匹配（如 --size: 8rem 和 calc(100vw - var(--size))），旧版 Safari 或 iOS 15.4 之前可能静默失效。
- CSS 变量值必须带单位，且和
calc()中其他操作数单位可运算：支持% + px、rem + em，但禁用% + vw混算 - 避免用
env()或theme()等运行时变量直接参与calc()，它们在部分环境可能未定义，导致整条声明失效 - 调试时可用
background: linear-gradient(to right, red 0%, red var(--size), blue var(--size))快速验证变量是否生效
嵌套 calc() + 变量 = 调试黑洞
width: calc(calc(100% / var(--cols)) - calc(2 * var(--gap))) 这类写法浏览器能解析，但一旦 --cols 未定义或 --gap 是空字符串，整条规则静默丢弃，控制台零提示。
立即学习“前端免费学习笔记（深入）”；
- 三层以上嵌套
calc()建议拆解：先用--col-width: calc(100% / var(--cols))，再--item-width: calc(var(--col-width) - 2 * var(--gap)) - 对关键尺寸（如栅格列宽、卡片间距），宁可用 JS 注入内联样式兜底，也不依赖多层
calc()+ 变量组合 -
var(--x, 16px)的 fallback 仅在变量完全未定义时触发，若变量值为空字符串或initial，fallback 不生效
真正麻烦的不是变量怎么写，而是当它和 box-sizing、transform、position: absolute 同时出现时，基准会层层偏移——比如 left: calc(50% - var(--size)) 在未设 position: relative 的父容器里，% 基准是 viewport，不是视觉所见的父块。
