box-sizing 默认值是 content-box，导致宽高计算包含 padding 和 border 而撑大元素；改用 border-box 可实现“所见即所得”，推荐全局重置为 * { box-sizing: border-box; }。
box-sizing 默认值是 content-box，这是尺寸计算出错的根源
绝大多数 CSS 尺寸问题都源于没意识到浏览器默认用 content-box 计算宽高：你设 width: 200px，实际占用空间 = 200px（内容） + 左右 padding + 左右 border。一旦加了内边距或边框，元素就撑大，布局错位。
常见现象包括：
- 明明设了
width: 100%，却横向溢出容器 - 两个并排
width: 50%的盒子，因padding或border导致换行 - 响应式断点在预期宽度前就触发，因为计算时多算了边框和内边距
把 box-sizing 改成 border-box 才符合直觉
border-box 模式下，width 和 height 包含内容区、内边距和边框，总尺寸就是你写的那个值。这是设计师和开发者真正想要的“所见即所得”行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置（推荐）：
* { box-sizing: border-box; }注意：该规则需放在所有样式之前，否则可能被后续声明覆盖 - 只对特定组件设置，比如表单控件：
input, textarea, select { box-sizing: border-box; } - 避免混用：不要在父容器用
content-box、子元素用border-box，容易引发嵌套计算混乱
flex 或 grid 布局中 box-sizing 依然生效，但影响方式不同
即使用了现代布局，box-sizing 仍决定单个元素的尺寸解析逻辑。例如在 display: flex 容器中：
- 若子项设
flex: 1且box-sizing: content-box，它的最终宽度仍会因padding和border超出分配空间 -
border-box能让flex-basis更可控，尤其配合min-width使用时 - Grid 中的
grid-template-columns: 1fr 2fr同样受每个格子的box-sizing影响——它不改变轨道划分，但改变单元格内容区域的实际可用宽度
IE8+ 都支持 box-sizing，但 vendor prefix 曾是坑
旧版 WebKit（Safari 5.1、Chrome 10）和 Firefox（早期 29 以下）需要前缀：
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
现在基本可省略前缀，但如果你维护老项目：
- 检查是否漏写了
-moz-前缀，Firefox 28 及更早版本会忽略无前缀声明 - 注意 IE8 支持
box-sizing，但不支持inherit值，慎用于继承链中 - 某些 CSS 预处理器（如 Sass）的
box-sizingmixin 会自动补全前缀，确认它是否已启用
真正容易被忽略的是：当使用第三方 UI 库（如 Bootstrap、Element Plus）时，它们通常已全局设置了 border-box，如果你在局部重写为 content-box，反而会打破原有尺寸体系——改之前先查库的 base.css。
