calc() 仅预计算数值，需配合 box-sizing: border-box 才能正确控制总宽；百分比基准依赖父容器宽度或 flex/grid 设置；运算符前后必须空格，单位不可省略，margin 不应参与 width 计算。
calc() 不是盒模型的“修复工具”，它只是提前算出一个数字塞给 width 或 height；真正决定这个数字怎么分配到内容、内边距、边框上的，是 box-sizing。
必须配合 box-sizing: border-box
只写 width: calc(100% - 40px) 却没设 box-sizing: border-box，元素大概率会撑出父容器。因为默认 box-sizing: content-box 下，总宽 = calc() 算出的内容宽度 + padding + border。你减了 40px，但 padding 和 border 又额外加回来，结果还是溢出。
正确做法：
- 显式声明
box-sizing: border-box（建议全局重置） - 此时
width: calc(100% - 40px)表示「内容+内边距+边框」整体占满父容器宽再减 40px - 不要再在
calc()里重复减padding或border，否则会多扣
calc() 中的百分比基准不总是可靠
100% 的计算结果取决于父容器是否具有明确的 width 值。在 flex 或 grid 容器中，子项若未设置 flex: 0 1 auto 或 min-width: 0，100% 可能解析为 0px，整个 calc() 失效。
常见有效场景：
- 标准文档流中，父容器设了
width: 80%或width: 600px -
flex容器中，子项加flex: 0 1 auto; min-width: 0 -
grid容器中，用grid-template-columns: 1fr后，子项的100%才基于轨道宽度计算
单位混用和空格陷阱最常导致样式静默失效
浏览器遇到语法错误的 calc() 会直接忽略整条声明，控制台不报错，但你发现样式“没生效”——大概率是这里错了。
必须遵守的规则：
- 运算符前后**必须有空格**：
calc(100% - 2rem)✅，calc(100%-2rem)❌ - 不能把无单位数值当长度用：
calc(100% + 10)❌（缺单位） -
vw和rem混合虽合法，但在 Safari 15.4 之前精度偏差大，建议优先用px或改用clamp() - 乘除仅支持数值 × 单位或单位 ÷ 数值：
calc(100% / 3)✅，calc(50% * 2em)❌
别手动从 width 里减 margin
margin 是盒外间距，不影响自身占据的空间宽度。写 width: calc(100% - 20px) 并加 margin: 10px，视觉上左右各空 10px，但语义混乱：你减的是什么？是 padding？是 border？还是纯留白？
更清晰的做法：
- 用
padding+box-sizing: border-box控制内部留白 - 用
margin单独控制外部间距，保持width语义干净 - 若真需动态控制“内容区 = 父宽 - 左右 margin”，用 CSS 自定义属性：
width: calc(100% - var(--margin-left) - var(--margin-right))
最容易被忽略的一点：你写的 calc() 看似在算“总宽”，其实它永远只算 content 区——除非你用 border-box 把解释权交出去。而一旦交出去，就别再自己偷偷再减一遍 padding 和 border。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
