直接用 box-sizing: border-box 就能从根源上解决内边距撑破容器的问题——它让 width 和 height 表示元素最终占据的完整尺寸（content + padding + border），不再额外叠加；默认 content-box 模式下 width 仅指内容区，padding 和 border 会累加导致总宽超限，而 border-box 则自动将 padding 和 border 向内压缩，确保总宽严格等于设定值。
直接用 box-sizing: border-box 就能从根源上解决内边距撑破容器的问题——它让 width 和 height 表示的是元素最终在页面上占据的完整尺寸，把 padding 和 border 全部算进这个值里，不再额外叠加。
为什么默认会撑破？
浏览器默认用的是 content-box 模式：你写 width: 300px; padding: 15px; border: 2px solid;，浏览器理解为“内容区宽 300px，再加左右各 15px 内边距、各 2px 边框”，总宽变成 334px。父容器没设 overflow 或没预留空间时，就直接溢出。
改成 box-sizing: border-box 后，这 300px 就是总宽——内容区自动压缩为 300px − 30px − 4px = 266px，padding 和 border 往里“挤”，不往外“涨”。
怎么全局启用才真正生效
推荐在项目 CSS 最顶部（重置样式之后、业务样式之前）写：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after { box-sizing: border-box; }
这个写法覆盖所有元素及其伪元素，避免 Flex/Grid 子项或 ::before/::after 因漏掉而计算错位。
注意两点：
- 必须放在 CSS 文件最前面，否则可能被后续样式覆盖
- 某些 UI 库（如老版本 Element UI）可能显式写了
box-sizing: content-box，需要检查并针对性覆盖
哪些地方容易忽略，导致还是撑破
即使启用了 border-box，以下情况仍可能撑破：
-
Flex 子项没设
min-width: 0：默认min-width: auto会阻止收缩，文字或图片长时硬顶出去 -
表单控件未加固：
input、textarea在部分旧版 Safari 或 IE 中仍回退为content-box，建议额外加input, textarea, button { box-sizing: border-box; } -
max-width和min-width也被影响：很多人只改width，结果max-width: 400px还是被 padding 推爆，其实它同样走border-box计算逻辑
验证是否真起作用
打开浏览器开发者工具，选中元素后看两处：
- “Computed” 面板里
box-sizing值是否为border-box - “Metrics” 面板中悬停宽度条，修改 padding 值，观察蓝色总宽度是否保持不变
如果总宽随 padding 增减而稳定不变，说明已真正生效。
