<p>box-sizing: border-box 将 padding 和 border 计入 width，使设置的 width 等于元素总宽，避免布局错位；现代 UI 框架均默认启用，推荐全局重置 * { box-sizing: border-box; }。</p>
box-sizing: border-box 是什么，为什么它能解决“宽度失控”问题
当你给一个 width: 200px 的元素加 padding: 10px 和 border: 2px solid，默认（content-box）下它实际占宽是 200 + 2×10 + 2×2 = 224px。这在做栅格布局、卡片并排、表单控件对齐时极易错位——尤其是用百分比或 flex 布局时，多出来的像素会直接导致换行或溢出。
border-box 把 padding 和 border 算进 width 里：设置 width: 200px 就真占 200px，内容区自动收缩。这是现代 CSS 布局的“事实标准”。
- 几乎所有现代 UI 框架（Bootstrap、Tailwind、Ant Design）都默认启用
border-box - 全局重置推荐写法：
* { box-sizing: border-box; }（注意：伪元素也要覆盖，可加*::before, *::after） - IE8+ 支持
box-sizing，但旧版 IE 需带前缀：-webkit-box-sizing、-moz-box-sizing（现在基本可忽略）
什么时候必须用 content-box
极少场景下你确实需要原始盒模型语义，比如：
- 封装一个「纯内容容器」组件，要求子元素尺寸完全由内容决定，且外部传入的
width必须严格等于内容区宽度（例如某些 Canvas 包装器、SVG 容器） - 与遗留系统对接，对方样式强依赖
content-box行为，临时隔离时用box-sizing: content-box覆盖 - 使用
resize: both的可拖拽文本域，设为content-box更符合用户对“拉宽=内容区变宽”的直觉（但需手动处理 padding/border 溢出）
flex / grid 布局中 box-sizing 的隐含影响
Flex 项和 Grid 单元格的 min-width 默认是 auto，而这个 auto 的计算逻辑依赖 box-sizing。若子项是 content-box，其最小宽度可能意外超出父容器（尤其当有 padding 时），触发 flex 换行或 grid 溢出。
立即学习“前端免费学习笔记（深入）”；
- flex 容器中，建议所有子项统一为
border-box，否则flex-basis行为难预测 - grid 中列轨道（如
grid-template-columns: 1fr 200px）的200px是指轨道宽，但单元格内元素若为content-box，仍可能撑破轨道 - 调试技巧：在 DevTools 中选中元素，右上角「Computed」面板里搜
box-sizing，确认生效值；再看width和computed width是否一致
第三方库或 reset.css 混用时的常见冲突
有些 reset（如 older Normalize.css 版本）没设全局 box-sizing，而你项目又引入了 Bootstrap（它自己重置了），结果可能是：部分区域正常，部分区域错位——因为同级元素盒模型不一致。
- 检查是否重复设置：用 DevTools 查看
html或body元素的 computedbox-sizing，再逐层向下确认是否被覆盖 - 避免局部覆盖破坏一致性：不要只给某个 class 设
border-box，除非你明确知道它不会嵌套进其他未重置的容器 - Vue/React 组件中，scoped style 或 CSS-in-JS 若漏掉
* { box-sizing: border-box }，容易在跨组件边界时暴露问题
真正麻烦的不是选哪个值，而是全项目保持一致——一旦混用，布局 bug 往往出现在最意想不到的嵌套层级里。
