直接用box-sizing: border-box就能解决——现代项目几乎必须全局启用，因其使width/height包含padding和border，避免content-box下因额外叠加导致溢出；需配合, ::before, *::after重置，并注意伪元素、打印模式及flex子项等不继承场景。
直接用 box-sizing: border-box 就能解决——不是“可以试试”，而是现代项目里几乎必须加的兜底规则。
为什么 width 会“被撑开”？标准盒模型的真实行为
标准盒模型（box-sizing: content-box）下，width 和 height 只管内容区域。一旦加了 padding 或 border，浏览器会把它们额外“加”到你写的宽高上，导致实际占位超出预期。
-
width: 200px; padding: 10px; border: 2px solid #000;→ 真实总宽度 = 200 + 10×2 + 2×2 =224px - 这不是 bug，是规范定义的行为
- 常见翻车场景：
Grid或Flex容器里子项设了固定width: 100%，结果因padding/border溢出父容器；表单控件（如input、textarea）加了padding后横向滚动或换行
全局重置 box-sizing 的正确写法
绝大多数现代项目应全局启用 border-box，避免逐个写死。最稳妥写法是：
*, *::before, *::after {
box-sizing: border-box;
}
- 必须包含伪元素，否则
::before/::after生成的内容仍走content-box，悄悄破坏布局 -
-webkit-box-sizing和-moz-box-sizing在现代项目中可省略（IE8+ 原生支持，当前主流环境早已放弃 IE7–8） - 顺序很重要：这条规则得放在所有自定义样式之前，否则会被后续声明覆盖
- 某些第三方 UI 库（如早期 Bootstrap 3）已内置类似重置，重复设置可能干扰其内部计算
哪些情况不能靠 box-sizing 解决？容易忽略的边界
box-sizing 只管 width/height 与 padding/border 的关系，它不处理：
-
font-size或行高变化引起的高度浮动（内容撑高仍会发生） -
SVG元素（<rect></rect>、<circle></circle>）完全不支持box-sizing，尺寸永远按 content-based 计算 -
flex项上必须单独声明box-sizing: border-box，否则padding会让实际占用宽度 >flex-basis；它不会从flex容器继承 - 打印模式（
@media print）中，浏览器会重置 UA 样式，box-sizing默认失效——必须在@media print块内为关键容器显式设置box-sizing: border-box !important
真正容易被忽略的是：伪元素、打印上下文、flex 子项、button 这类原生控件——它们要么不继承，要么被 UA 样式劫持，要么在特定环境（Safari、WebView）里静默失效。别只信通配符，该显式就显式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
