box-sizing: border-box 能防止元素撑开，因其使 width/height 包含 padding 和 border，内容区自动收缩；全局重置需写 , ::before, *::after 确保伪元素也被覆盖，避免漏设导致布局错位。
box-sizing: border-box 为什么能防止元素撑开
默认情况下，box-sizing 是 content-box，这时设置的 width 和 height 只包含内容区，而 padding 和 border 会额外加在外部——导致实际占用空间大于设定值，尤其在 flex 或 grid 布局中容易溢出或换行。
把 box-sizing 设为 border-box 后，width 和 height 就变成“总尺寸”，padding 和 border 被压缩进这个范围内，内容区自动收缩，布局更可控。
全局重置时为什么要用 * + ::before + ::after
只写 * { box-sizing: border-box; } 不够：某些伪元素（如 ::before、::after）可能被浏览器默认设为 content-box，尤其在引入第三方 UI 库时，它们的内部样式可能覆盖全局重置。
所以推荐这样写：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}确保所有节点（包括生成内容）都统一盒模型行为。
flex 容器里子项撑开的典型场景和修复
常见于 display: flex 容器中，子项设置了 width: 50% + padding: 16px，结果两列无法并排——因为 padding 加在 width 外，总宽超 100%。
解决方式不是删 padding，而是确保子项已继承 border-box：
- 确认全局重置已生效（见上一条）
- 避免对子项单独设
box-sizing: content-box（比如某些重置库或组件库会这么做） - 若需兼容老版 Safari（box-sizing 需加
-webkit-前缀（但现代项目基本可忽略）
input、textarea 等表单控件的特殊处理
部分浏览器（如 Chrome）对 <input> 默认使用 border-box，但 <textarea></textarea> 或自定义 appearance: none 的控件可能回退到 content-box，尤其加了 padding 后高度失控。
稳妥做法是显式声明：
input,
textarea,
select {
box-sizing: border-box;
}另外注意：height 设为 100% 时，若父容器没设明确高度，仍会按内容撑高——box-sizing 解决不了这个，得配合父级 height 或 min-height 控制。
真正容易被忽略的是：全局重置后，如果某个组件库的 CSS 在你的样式表之后加载，它可能覆盖 box-sizing；检查 computed styles 里的 box-sizing 值，比猜更有用。
