calc()混用百分比与vw/vh易失效，因计算上下文不一致；box-sizing不改变calc结果的基准；transform不影响%基准；媒体查询不支持calc()。
calc() 里用百分比和视口单位混算容易失效
直接写 width: calc(100% - 2rem) 没问题，但一旦掺进 vw 或 vh，比如 width: calc(100vw - 64px)，就可能在某些浏览器（尤其是旧版 Safari）里计算错——不是数值错，而是盒模型尺寸没按预期缩放。
根本原因是：百分比依赖父容器宽度，vw 是视口宽度，两者计算上下文不一致，CSS 引擎在布局阶段可能还没确定父容器尺寸，就强行代入了 vw 值。
- 优先用同类型单位混算：比如
calc(100% - 2em)或calc(100vw - 2rem)，避免%和vw直接相减 - 如果必须跨上下文（如“占满视口但扣掉固定 header 高度”），改用
max-width+width: 100%组合，或用container查询配合clamp() - 在 iOS 15.4 之前，
calc(100vw - var(--gap))中的 CSS 变量若来自 :root，可能被忽略——变量得定义在组件自身选择器里才可靠
box-sizing: border-box 被 calc() 的缩放“绕过”
很多人以为设了 box-sizing: border-box 就万事大吉，结果发现用 calc() 算出来的宽高，在加了 padding 或 border 后，内容区还是被挤窄了。
这是因为 calc() 计算的是 width / height 这个 CSS 属性值本身，而 box-sizing 只控制这个值最终如何分配到 content + padding + border 上。如果你写 width: calc(100% / 3)，它算出的是 content 宽度目标值，但 padding 仍会额外撑开总尺寸——除非你手动把 padding 也纳入 calc。
立即学习“前端免费学习笔记（深入）”；
- 想让“总宽度 = 1/3 视口宽”，就得写：
width: calc((100vw - 2 * 1rem) / 3)，再单独给padding: 1rem，否则 padding 会叠加出去 - 更稳的做法是：用
flex或grid替代纯 calc 宽度分配，它们天然尊重box-sizing - 注意
border-width在缩放时不会随rem或vw动态变——它默认是固定像素，要响应式就得显式写成border: calc(1px * 1) solid #000（虽然看起来傻，但能触发相对计算）
calc() 缩放遇到 transform: scale() 时盒模型尺寸“失真”
用 transform: scale(0.8) 缩放一个容器，再在里面用 calc(100% - 16px)，你会发现百分比还是按缩放前的父容器尺寸算的——transform 不影响布局流，所以 % 基准没变，但视觉上内容变小了，导致留白错位、点击区域偏移。
这不是 bug，是规范行为：transform 不触发重排，% 依然锚定原始 layout size。
- 避免在同一个元素上又
transform: scale()又依赖%做 calc——要么全用 transform 控制尺寸，要么全用 calc + 布局属性 - 如果必须混合（比如动画中临时缩放），把需要响应缩放的尺寸逻辑移到子元素，用
scale()的 inverse 值反向调整：width: calc(100% / 0.8)（仅当 scale 因子已知且固定） - 更干净的解法：用
zoom（非标准但兼容性好），它会真实缩放整个盒模型，%基准随之改变；不过要注意zoom会影响字体渲染和 focus outline
媒体查询里 calc() 的“双重缩放”陷阱
在 @media (max-width: calc(768px + 1rem)) 这种写法里，calc() 不起作用——媒体查询不支持表达式，这行代码等价于无效语法，整条规则会被浏览器忽略。
媒体查询的 width、min-width 等参数只接受绝对长度、em、rem、px，不解析 calc()。你想动态切点？得靠 JS 注入或预编译（如 Sass）。
- 别在
@media里写calc()，写了也不报错，只是静默失效 - 需要根据视口比例动态断点？用
container queries（@container），它支持inline-size: calc(...) - 如果项目还跑在老浏览器上，断点统一用
px，再用 JS 监听resize动态加 class，比硬啃 calc + media 更可控
最麻烦的从来不是写对一个 calc() 表达式，而是它嵌在盒模型、缩放、媒体查询、继承链里时，不同层级的“基准”悄悄错开了——有时候删掉一行 padding，整个 calc() 就突然对了。
