calc()溢出主因是未正确减去总边距，需按box-sizing区分：content-box下须减margin+padding+border，border-box下只减margin；另需配对定位、统一单位、检查布局上下文。
calc() 计算后仍溢出，大概率是没减对“总边距”
你写了 width: calc(100% - 10px)，但实际左右 margin 各 5px、padding 各 12px、border 各 1px，那真正要减的不是 10px，而是 10px + 24px + 2px = 36px。calc() 本身不会自动识别你设了哪些盒模型属性——它只按你写的算。
常见漏减项：
- 只减了
margin，忘了padding和border（尤其 border 是双侧的） - 用了
box-sizing: content-box（默认值），此时width不含 padding/border，必须手动全减 - 父容器本身有
padding或border，而你只按视口或 body 宽度减，没扣父级已占空间
box-sizing 没配对 calc()，等于白写
如果你用 box-sizing: border-box，那 width 就包含 padding 和 border，此时 calc() 只需减掉 margin；但如果你没声明 box-sizing，浏览器默认用 content-box，那 calc() 必须把 margin + padding + border 全部减干净。
建议统一加在重置样式里：
* {
box-sizing: border-box;
}
这样后续所有 calc(100% - X) 只需专注减 margin，不用反复确认 padding/border 是否参与计算。
fixed 或 absolute 元素的 left/top 偏移没配合 width 调整
比如你给一个 position: fixed; width: calc(100% - 20px) 的弹窗，却没设 left: 10px，结果它从 left: 0 开始画，右边会多出 10px 溢出——因为减的是总宽，但定位起点没动。
正确配对方式：
-
left: 10px;+width: calc(100% - 20px);→ 左右各留 10px -
inset: 10px;（等价于top: 10px; right: 10px; bottom: 10px; left: 10px;）+width: auto; height: auto;→ 更简洁，无需 calc()
calc() 里的单位混用导致精度丢失或无效计算
比如写成 width: calc(100% - 10)（漏了 px），或者 calc(100vw - 1em) 在 font-size 动态变化时行为不可控。浏览器会静默忽略整个声明，回退到未声明的 width（通常是 auto 或继承值），从而意外溢出。
安全写法要点：
- 所有带单位的值必须显式写出单位：
10px、2rem、5% - 避免在 calc() 中混合 viewport 单位（
vw/vh）和相对单位（em/rem），除非你明确控制根字体大小 - 用浏览器 DevTools 的 computed 样式面板，直接看最终生效的
width值是否符合预期，而不是只信源码
最常被忽略的一点：calc() 解决的是“尺寸计算”，但它不解决“布局上下文”。如果父容器是 float、flex 或 grid，且子元素没正确参与排列（比如没设 flex-shrink: 0 或 min-width: 0），即使 width 算对了，也可能因 shrink 行为被压缩再撑开，造成二次溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
