box-sizing: border-box 是现代 css 布局起点，使 width 指边框盒总宽，padding 和 border 向内压缩；需全局设置 *, *::before, *::after 并置于 ui 库后，且须单独加固表单元素及处理 flex 子项 min-width、替换元素 max-width 等溢出隐患。
box-sizing: border-box 是解决内边距撑破容器的直接手段，不是可选项，而是现代 CSS 布局的起点。
为什么 width 设了还是被 padding 撑开
浏览器默认用 box-sizing: content-box，此时 width 只管内容区，padding 和 border 全部额外叠加。比如 width: 200px; padding: 12px; border: 1px solid #000;，实际占宽是 200 + 24 + 2 = 226px。
这种叠加在嵌套中会放大：父容器有 padding: 0 16px，子元素 width: 100% 就只剩 343px（假设视口 375px），再叠上自己的 padding: 12px，立刻超宽。
- DevTools 的「Computed」面板里查
box-sizing值，别信代码写了就生效——框架或重置样式可能覆盖它 -
input、textarea等表单元素自带 padding 和 border，不显式重置box-sizing，width: 100%基本必溢出 - 伪元素
::before/::after若参与布局（如清除浮动），漏掉它们照样悄悄撑宽
全局设置 box-sizing: border-box 的实操要点
border-box 让 width 指“边框盒总宽”，padding 和 border 全往里扣，内容区自动压缩——这才是人直觉里的“这个盒子就是 200px 宽”。
最稳写法是：
*, *::before, *::after {
box-sizing: border-box;
}
- 必须放在第三方 UI 库（如 Element Plus、Ant Design）的 CSS 之后引入，否则会被覆盖
- 老项目慎用通配符：某些依赖
content-box手动计算的旧布局（比如calc(100% - 20px)）会错位 -
table、textarea、button等替换元素在部分旧版 Safari/IE 中可能忽略该设置，建议单独加固：input, select, textarea, button { box-sizing: border-box; }
box-sizing 生效了还撑破？检查这三个地方
就算 box-sizing 是 border-box，以下情况仍会撑破：
- flex 子项默认
min-width: auto，会阻止收缩——哪怕width: 100%也顶不住长文本或图片，必须加min-width: 0 -
img、iframe是替换元素，不响应width，得配max-width: 100%和height: auto -
max-width和min-width同样走border-box规则，很多人只改width，却忘了max-width: 400px也会被 padding 推爆
真正容易被忽略的是：box-sizing 对 max-width 和 min-width 同样生效，而且伪元素、表单控件、flex 子项的 min-width 行为，比 width 本身更常成为溢出源头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
