width: 100% 撑破容器是因默认 box-sizing: content-box 导致总宽=100%+padding+border；全局设 , ::before, *::after { box-sizing: border-box } 可彻底解决，且为 flex/grid 布局刚需。
为什么 width: 100% 会撑破容器？content-box 是罪魁祸首
你写 width: 100%，加了 padding: 16px 和 border: 1px solid，结果父容器横向滚动条弹出来了——这不是 bug，是 box-sizing: content-box（默认值）的必然行为。它让 width 只管内容区，而 padding 和 border 全部“额外加在外面”。总宽 = 100% + 左右 padding + 左右 border，轻松超限。
全局设置 *, *::before, *::after { box-sizing: border-box; } 怎么做才稳
在项目 CSS 入口（比如 base.css 或 reset.css）最顶部加这一行：
*, *::before, *::after {
box-sizing: border-box;
}- 必须包含
*::before和*::after：很多组件（如 Tooltip、Badge）依赖伪元素，漏掉会导致它们尺寸失控 - 比只写
*更彻底：某些旧版浏览器对伪元素的继承支持不一致，显式声明更可靠 - 表单控件（
input、textarea）也覆盖到了——它们在 Safari/IE 中常默认用content-box，不重置就容易错位
flex/grid 布局里，border-box 不是加分项，是刚需
当你写 display: flex，子项设 flex: 1 或 width: 50%，再加 padding: 20px，content-box 下两个子项总宽直接突破 100%，换行或溢出；border-box 下，它们严丝合缝填满父容器。
-
grid-template-columns: 1fr 2fr的每个格子，加padding后仍能精准按比例分配空间 - 卡片组件写
width: 90%+border-radius+padding，不会意外触发横向滚动 - 避免大量
calc(100% - 32px)这类反人类写法
容易被忽略的三个坑
box-sizing 看似简单，但这些点不注意，照样翻车：
立即学习“前端免费学习笔记（深入）”；
-
margin永远不参与border-box计算——它始终在盒子外部，别指望它被“包含”进去 - 第三方 UI 库（如 Bootstrap 4+、Ant Design）通常已内置该重置，重复添加可能被覆盖，建议用 Chrome DevTools 的 Computed 面板检查
box-sizing实际值 - 某些老项目用了
zoom或transform: scale()缩放，border-box不影响缩放逻辑，但padding/border会同比放大，可能造成像素模糊
真正省心的不是加了那一行 CSS，而是从第一个 div 开始，就按 “我设的 width 就是它最终占多少地方” 来思考尺寸——这种直觉，得靠 border-box 养成。
