box-sizing 的 content-box 和 border-box 分别使 width 仅计内容区或包含 padding 和 border；默认 content-box 易致布局溢出，border-box 统一按总宽高计算，推荐全局设置 、::before、*::after 为 border-box，但需注意第三方库兼容性及特殊元素异常。
box-sizing 的两种取值怎么影响宽度计算
默认情况下，box-sizing 是 content-box：你写的 width: 200px 只算内容区，加上 padding 和 border 后，元素实际占位会超过 200px。这在栅格布局、并排容器或响应式场景里极易导致换行或溢出。
改成 border-box 后，width 就是“总宽度”：内容区自动收缩，把 padding 和 border 挤进这个尺寸里。这是解决“设了 width 还撑破容器”问题最直接的手段。
常见错误现象：
– 两个 width: 50% 的 div 并排却换行
– input 设置了 width: 100% 但超出父容器
– flex 项因 padding/border 导致尺寸失控
全局重置 box-sizing 的写法和注意事项
推荐在 CSS 开头统一设置，避免逐个写：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
这个写法覆盖所有元素及其伪元素，确保后续所有尺寸声明都按“总宽高”理解。但要注意：
- 第三方 UI 库（如 Ant Design、Element Plus）内部可能依赖
content-box行为，全局重置后个别组件样式可能偏移，需针对性回退 -
textarea和select在某些旧版 Safari 中对border-box的解析有偏差，若出现高度异常，可单独设回content-box - 不要只写
* { box-sizing: border-box; }，漏掉伪元素会导致 ::before/::after 的尺寸计算不一致
border-box 在 flex 和 grid 布局中的实际效果
在 display: flex 容器中，子项默认按 content-box 计算，一旦加了 padding 或 border，flex-basis 就容易失准。设成 border-box 后，flex-basis: 200px 真正代表“占满 200px”，不再被内边距干扰。
