设 box-sizing: border-box 可使 width/height 直接表示最终占位大小，避免 content-box 下 padding 和 border 导致的宽度叠加计算（如 width:200px+padding:10px+border:1px=222px），提升嵌套、响应式及 Flex/Grid 布局的准确性与可控性。
直接把所有元素的盒模型设为 border-box，就能让 width/height 指代“最终占位大小”，彻底避开 padding 和 border 的叠加计算。
为什么默认的 content-box 让人头疼
浏览器默认用 content-box：你写 width: 200px; padding: 10px; border: 1px solid，元素实际宽度是 222px（200 + 左右 padding 各 10 + 左右 border 各 1）。嵌套、响应式、栅格对齐时，光靠心算很容易出错。
一行代码全局统一
在 CSS 开头加这段就够了：
*, *::before, *::after { box-sizing: border-box; }
之后所有元素——包括伪元素——都按 border-box 解析：width: 200px 就是实实在在占 200px 宽，padding 和 border 往里“挤”，不撑大容器。
立即学习“前端免费学习笔记（深入）”；
配合 flex/grid 更稳
- Flex 项目设
flex: 1时，border-box能确保多个等分区域严格填满父容器，不会因 padding/border 溢出 - Grid 中定义
grid-template-columns: 1fr 2fr，每个格子的宽高计算更可预期，不用反复调试 margin 补偿 - 表单控件（input、textarea）也建议单独重置：它们在某些浏览器中可能忽略继承，显式写
box-sizing: border-box更保险
注意几个小细节
- 改变
box-sizing不影响已设置的min-width/max-width，它们依然按新模型理解 - 如果用了第三方 UI 库（比如 Bootstrap），它通常已自带
border-box重置，不必重复加，但可以检查确认 - 动画或 JS 动态读取
offsetWidth时，值就是你写的 width，逻辑更直观
