box-sizing 默认值是 content-box，导致 width/height 不含 padding 和 border 而引发溢出；推荐全局重置为 border-box，但需注意第三方库覆盖、SVG 不支持及 Shadow DOM 作用域限制。
box-sizing 默认值是 content-box，这是溢出的根源
浏览器对 width 和 height 的默认解释，只算内容区域，不包含 padding 和 border。你设了 width: 200px，再加 padding: 10px 和 border: 1px，实际占宽就是 222px——父容器没留余量，自然溢出。
常见错误现象：overflow: hidden 压不住、子元素撑破 flex 容器、grid 项错位、响应式断点突然换行
- 全局重置最省事：
*, *::before, *::after { box-sizing: border-box; } - 只改关键组件也行，比如表单控件：
input, textarea, select { box-sizing: border-box; } - 注意：重置后，旧代码里靠「故意多留 content 宽度来抵 padding」的写法会失效，得同步调整数值
border-box 不等于万能解，flex/grid 里仍要防隐式收缩
box-sizing: border-box 解决的是单个元素的尺寸计算逻辑，但不会改变 flex 或 grid 的分配规则。如果父容器设了 flex: 1，子元素又写了 width: 100% + padding，依然可能因盒模型叠加导致计算偏差。
使用场景：侧边栏固定宽 + 主内容自适应、卡片列表等流式布局
- flex 项优先用
flex-basis替代width，它受box-sizing影响更直接 - grid 中避免混用
fr单位和带padding的绝对宽，容易触发隐式 min-content 计算 - 检查 computed style 里的
width值，确认是否真按 border-box 解析（DevTools 中该值应含 padding+border）
IE8 及更早版本不支持 box-sizing，但现代项目通常可忽略
IE8 支持 box-sizing，但需要 -ms- 前缀；IE7 及以下完全不支持。不过现在绝大多数项目已放弃兼容 IE7–8，无需为它们 hack。
性能影响：零。这是一个纯渲染层计算方式切换，不触发重排或重绘
- 如需兼容老 IE，只能手动把
padding和border从width里减掉，维护成本高 - PostCSS 的
autoprefixer会自动补-ms-box-sizing，但仅限 IE8–9 - 真正容易被忽略的是 SVG 元素——
<rect></rect>、<circle></circle>等不支持box-sizing，尺寸逻辑始终是 content-based
第三方 UI 库样式可能覆盖你的 box-sizing 设置
像 Ant Design、Element Plus 这类库，内部组件常带自己的 box-sizing 规则，且权重高。你全局写了 * { box-sizing: border-box }，但库的 .ant-btn { box-sizing: content-box !important } 仍可能生效。
调试方法：在 DevTools 里点开元素的 Styles 面板，看 box-sizing 是否被 strike-through，以及最终来源是哪条规则
- 提高权重：用
!important是下策；更稳妥的是用更具体的选择器，比如body .my-app * { box-sizing: border-box; } - Shadow DOM 场景下，全局重置无效，必须在
:host或组件内部样式中显式声明 - 某些 CSS-in-JS 方案（如 styled-components）会隔离样式，需确保 reset 规则注入到正确 scope
事情说清了就结束。真正麻烦的不是 box-sizing 本身，而是它和 flex/grid/minmax()/第三方样式之间那几处不声不响的咬合点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
