<p>应优先用padding替代margin并配合box-sizing: border-box，使calc(100% - 总留白)作用于包含padding的总宽；flex/grid中则优先使用gap控制间距，避免在margin上直接用calc()。</p>
calc() 里怎么处理 margin 导致的盒模型溢出？
直接在 width 上写 calc(100% - 20px) 很容易失效——因为百分比宽度默认基于父容器 content-box 计算，而 margin 是额外加在外部的，结果常导致子元素撑破父容器。真正要减的不是 margin 值本身，而是它参与布局后实际占用的空间位置。
常见错误现象：display: flex 容器里一个子项设 width: calc(100% - 40px) + margin: 20px，结果横向滚动或换行。
- 用
box-sizing: border-box不影响 margin，别指望它“包含” margin - margin 不参与 width 计算，
calc()里的减法必须显式对应 layout 中真实挤占空间的部分 - 更稳妥的做法是把 margin “挪进去”：用
padding或inset（配合position: absolute）替代外边距逻辑
用 calc() 配合 padding 替代 margin 的实操路径
当目标是“内容区宽度 = 父宽 - 左右留白”，且留白本意是视觉隔离而非布局占位时，padding 比 margin 更可控——它属于 box-sizing 可控范围，且 calc() 减去的是 content 区真正可缩放的部分。
示例场景：卡片列表，每张卡片需左右各留 16px 空隙，但不允许横向溢出：
立即学习“前端免费学习笔记（深入）”；
card {
width: calc(100% - 32px); /* 直接减去总留白 */
padding: 0 16px; /* 留白转为内边距 */
box-sizing: border-box; /* 确保 width 包含 padding */
}- 关键点：
padding值必须和calc()中减去的值严格一致（如 16px × 2 = 32px） - 如果卡片有 border，也要计入
calc()：比如border: 1px solid #ccc，则写成calc(100% - 32px - 2px) - flex 或 grid 容器中，优先用
gap控制间距，此时calc()只需专注内容宽度，不用管留白
IE11 下 calc() 对 margin 的兼容性陷阱
IE11 支持 calc()，但对单位混合极其敏感：calc(100% - 20px) 可以，calc(100% - 2rem) 就可能计算失败并回退为 auto。更隐蔽的是，IE11 不支持在 margin 属性本身使用 calc() 来动态设外边距（尽管现代浏览器可以）。
- 不要写
margin-left: calc(50% - 100px)这类用于居中的 hack，在 IE11 会直接忽略整条声明 - 若必须动态控制外边距，改用
transform: translateX(calc(-50% + 10px))，IE11 对 transform 内的 calc 支持更稳 - 所有 calc 表达式里避免混用
vh/vmin和px，IE11 解析易出错
为什么用 max-width 配合 calc() 比单纯 width 更安全？
纯 width: calc(100% - X) 在父容器过窄（比如 viewport max-width 能兜底。
典型写法：
section {
width: calc(100% - 40px);
max-width: calc(100vw - 40px); /* 防止超小屏下 width 负值 */
margin: 0 auto;
}-
max-width用vw单位更可靠，因为它不依赖父容器实际渲染宽度 - 不要用
min-width去“修复” calc 结果，它无法阻止负 width 的初始计算崩溃 - 移动端适配时，建议在 media query 里重置 calc 表达式，而不是靠单一 max-width 应对所有尺寸
实际项目里最常被忽略的，是 calc() 的计算时机——它发生在 layout 阶段早期，此时元素尚未应用 margin 折叠、浮动影响或 flex 分配，所以任何依赖后续布局行为的减法（比如“减去兄弟元素的 margin”）本质上不可靠。
