设置 box-sizing: border-box 能解决宽度溢出问题，因其将 padding 和 border 计入 width/height 内，使 width: 100% 真实占满父容器，避免 content-box 下因额外尺寸导致的撑破、换行或滚动条。

为什么设置 box-sizing: border-box 能直接解决宽度溢出问题？

因为默认的 content-box 模式下，width: 100% 只管内容区，一旦加了 padding: 16px 和 border: 1px solid，总宽就变成 100% + 32px + 2px，必然撑破父容器——尤其在 Flex/Grid 子项或响应式栅格里，横向滚动条、换行、错位全来了。而 border-box 把 padding 和 border “吃”进设定的宽高里，width: 100% 就是真·占满，不额外加一像素。

全局启用的实操写法与兼容性注意点

最稳妥的做法是在 CSS 入口（如 reset.css 或 base.css）顶部加这一行：

* {
  box-sizing: border-box;
}

它覆盖所有元素，包括 input、textarea、button 等表单控件——这点常被忽略，导致表单元素在不同浏览器中尺寸不一致。注意：IE8+ 完全支持，无需前缀；但若项目仍需兼容 IE7，不能用此写法（得逐个类名设置）。

和百分比布局、Flex/Grid 搭配时的关键行为

在响应式场景中，border-box 不是“锦上添花”，而是避免反复 calc() 的刚需：

• Flex 子项设 flex: 1 且带 padding: 12px？不用再担心 padding 抢走主轴空间
• Grid 列写 grid-template-columns: 1fr 1fr，每个格子加 border: 2px 和 padding: 16px？依然严丝合缝，不会溢出轨道
• 移动端写 width: 90% 的卡片，加 border-radius 和 box-shadow？视觉尺寸可控，不触发横向滚动

容易踩的坑：不是设了就万事大吉

有三类情况仍会“破框”：

• margin 永远不参与 border-box 计算——它始终在盒子外部，别指望它被“包含”
• 某些第三方 UI 库（如旧版 Bootstrap 3）内部已重置过 box-sizing，全局 * 可能被覆盖，建议检查 computed styles 验证
• 使用 transform: scale() 或 zoom 缩放时，border-box 不影响缩放后渲染尺寸，但视觉上 padding/border 会同比放大，可能模糊

真正省心的不是加了一行 CSS，而是从第一个 div 开始就按 border-box 的逻辑去想尺寸——比如“这个按钮我要它宽 200px”，那就直接写 width: 200px; padding: 12px; border: 2px，不用再心算减法。