<p>直接在width中用calc(100% - 20px)减margin是错误的，因margin不参与盒模型宽度计算；正确做法是预留margin空间，如width: calc(100% - 2 * var(--gap))并配合margin: 0 var(--gap)，或优先使用flex/grid+gap。</p>
calc() 里怎么正确减去 margin 值？
直接在 width 里用 calc(100% - 20px) 减 margin 是错的——CSS 盒模型中，margin 不参与 width 计算，它作用在盒外。你真正要减的通常是 padding 和 border，除非你用的是 box-sizing: border-box 且把 margin 挤进可用空间（这本身不合法）。
常见错误现象：width: calc(100% - 20px); margin: 10px; 导致元素总宽度超父容器，触发横向滚动或换行。
- 想让「内容区 + padding + border」占满父容器？用
box-sizing: border-box+width: 100%，无需 calc - 真要动态预留左右 margin 空间？得靠
calc()配合margin自身，比如width: calc(100% - 20px); margin: 0 10px;—— 这时 20px 是为两个 10px margin 预留的宽度余量 - 注意单位混用：不能写
calc(100% - 10px - 1em)，但可以，浏览器支持；不过calc(100% - 10)（缺单位）会直接失效
为什么 calc(100% - 2 * 10px) 比 calc(100% - 10px - 10px) 更安全？
两者结果相同，但乘法形式更易维护、更少出错。尤其当 margin 值来自 CSS 变量时，calc(100% - 2 * var(--gap)) 能避免重复书写变量，也防止漏掉某个减项。
使用场景：响应式卡片栅格，每列左右各留 --gap: 12px，单列宽度就得是 calc((100% - 2 * var(--gap)) / 3)（三列布局）。
立即学习“前端免费学习笔记（深入）”；
- 乘法支持变量：只要
--gap有合法长度值，2 * var(--gap)就能解析 - 加减运算符前后必须有空格，
calc(100%-2*10px)会报错，必须写成calc(100% - 2 * 10px) - 嵌套 calc 不推荐：
calc(calc(100% - 20px) / 3)合法但难读，直接平铺更稳妥
和 flex/grid 一起用 calc() 容易踩什么坑？
在 display: flex 容器里给子项设 width: calc(...)，常被 flex 的默认伸缩行为覆盖。flex item 的 flex-basis 才是实际起效的“基础宽度”，而 width 仅在 flex-basis: auto 且未设 flex 时才生效。
- 想固定宽度并留 margin 余量？优先设
flex: 0 0 calc(50% - 10px)，其中flex-basis接收 calc 结果 - grid 中用
grid-template-columns: calc(1fr - 10px) 1fr是合法的，但注意fr单位不能参与 calc 运算，calc(1fr - 10px)实际会被忽略（部分浏览器降级为 auto） - 真正兼容的做法：用
grid-template-columns: 1fr 1fr+gap: 20px替代手动 calc 减 margin
移动端 rem + calc() 动态适配时的精度陷阱
用 rem 做根字体缩放时，calc(100% - 2rem) 看似合理，但百分比基于父容器宽度，rem 基于 root font-size，二者基准不同，叠加后容易失准——尤其在 viewport 缩放或系统字体放大时。
- 更稳的组合：全用 rem 或全用 vw，例如
width: calc(100vw - 2rem)（前提是 rem 固定，或配合 JS 动态重设 :root font-size） - Chrome 110+ 支持
clamp()，替代复杂 calc：width: clamp(320px, calc(100% - 2rem), 768px)，但注意旧版 Safari 对 clamp + calc 混用支持不稳定 - 调试技巧：在 DevTools 里 hover
calc(...)值，能看到实时计算结果；若显示invalid value，八成是单位缺失或空格错误
calc 的本质是运行时表达式，不是预处理器宏。它不展开变量、不合并同类项，写错一点就整个失效，而且没法 debug —— 最容易被忽略的，其实是空格和单位的一致性。
