box-sizing: border-box 是让 width/height 包含 padding 和 border 的盒模型模式，能治撑破是因为它将设定值视为元素总宽高，而非仅内容区；默认 content-box 模式下 width 仅指内容宽，叠加 padding 和 border 后总宽超限溢出。
box-sizing: border-box 是什么，为什么它能治撑破
直接用 box-sizing: border-box 就能从根源上解决内边距撑破容器的问题——它让 width 和 height 表示元素最终占据的完整尺寸（content + padding + border），不再额外叠加。默认 content-box 模式下，width: 300px 仅指内容区宽，再加 padding: 15px 和 border: 2px，总宽就变成 334px，父容器没预留空间时直接溢出。
全局启用 * { box-sizing: border-box } 的坑在哪
通配符写法最省事，但上线前必须盯住三类风险：
- 第三方 UI 组件（比如老版本 Element UI、某些 Web Component）可能显式写了
box-sizing: content-box来适配旧逻辑，被通配符覆盖后边框/内边距错位 -
<select></select>、<textarea></textarea>在部分旧版 Safari/IE 中默认仍是content-box，建议单独加固：input, select, textarea, button { box-sizing: border-box; } - 伪元素（
::before/::after）若参与布局（如用作装饰块），需确保也被覆盖——更稳妥的写法是：*, *::before, *::after { box-sizing: border-box; }
用了 border-box 还撑破？检查 max-width 和 min-width
很多人只改了 width，却忘了 max-width 和 min-width 同样走 border-box 规则。如果父容器设了 max-width: 400px，子元素又带 padding: 20px，但没加 box-sizing: border-box，照样撑爆。
Flex 布局下尤其容易漏掉这个点：
- Flex 子项默认
min-width: auto，会阻止收缩，哪怕用了border-box也顶不住长文本或图片 - 必须配合
min-width: 0才能真正释放收缩能力 -
input、textarea这类替换元素还自带min-width: min-content，得显式覆盖
真正容易被忽略的，是 box-sizing 对 max-width 和 min-width 的影响同样生效
改完 width 别忘了查这两个；另外，流式布局中若同时用了 float 或负 margin，容器高度可能被扭曲——box-sizing 管尺寸，不管文档流。这时候得看结构是否干净，有没有浮动未清除、负边距滥用或 flex 子项锁死交叉轴拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
