box-sizing: border-box 能防止 padding 撑破容器，因其使 width 包含 padding 和 border，总宽严格等于设定值；默认 content-box 下 width 仅限内容区，加 padding/border 后额外扩张导致溢出。
box-sizing: border-box 为什么能防止 padding 撑破容器
因为浏览器默认用 content-box 计算宽度：你写 width: 300px，它只管内容区；加上 padding: 15px 和 border: 1px，实际总宽变成 300 + 30 + 2 = 332px，父容器没设 overflow 就直接溢出。换成 border-box 后，width: 300px 指的就是最外边框的总宽，padding 和 border 往里扣，不往外涨——这才是人眼看到的“这个盒子就是 300px 宽”。
全局声明怎么写才真正生效，而不是白写
很多人写了 * { box-sizing: border-box; } 却发现某些元素还是撑破，问题不在属性本身，而在继承链和覆盖优先级：
-
* { box-sizing: border-box; }优先级极低，遇到input { box-sizing: content-box; }这类更具体的选择器就会被干掉 - 伪元素（
::before/::after）不会自动继承，Flex/Grid 子项里常因此漏掉 - 推荐写法（已验证在 Chrome/Firefox/Safari/Edge 中稳定）：
html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } - 必须放在所有其他 CSS 规则之前，尤其要早于 normalize.css、UI 库样式（如 Element UI 旧版会显式重置为
content-box）
即使用了 border-box，这些地方照样会撑破
别以为加了全局声明就万事大吉。以下场景中 box-sizing 依然“无能为力”，得额外处理：
-
flex子项未设min-width: 0：默认min-width: auto会阻止收缩，长文本或图片直接顶破容器 -
max-width和min-width同样受border-box影响——很多人只改width，结果max-width: 400px还是被padding推爆 -
input、textarea在旧版 Safari（iOS 12 及更早）或 IE 中可能回退为content-box，需单独加固：input, textarea, button { box-sizing: border-box; } -
width: auto或width: fit-content时，box-sizing不参与计算——它只约束你显式写的width/height值
怎么确认 border-box 真正起作用了
不能光看代码写了没，得进开发者工具实测：
立即学习“前端免费学习笔记（深入）”；
- 选中目标元素，在 “Computed” 面板查
box-sizing值是否为border-box - 切到 “Metrics” 面板，悬停在蓝色宽度条上，手动增减
padding值，观察总宽度是否稳定不变 - 如果总宽随
padding变化而浮动，说明要么被更高优先级规则覆盖，要么该元素处于flex-basis: auto或表格单元格等特殊上下文中
真正容易被忽略的是：动态插入的元素（比如 document.createElement('div')）不会自动继承 * 规则，它们依赖父节点的 inherit 链；若父节点没设 box-sizing，新元素就还是 content-box。
