设置 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，不用再心算减法。
