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”，不再被内边距干扰。
同理，在 grid-template-columns: 1fr 200px 中，那个 200px 的列如果含 padding: 10px，用 content-box 会实际占 220px，破坏等分逻辑；用 border-box 则严格守界。
关键点：
– flex 的 min-width/max-width、grid 的轨道尺寸，都受 box-sizing 影响
– 不要以为 “用了 flex 就不用管 box-sizing”，它只是让排列更智能，没改底层尺寸定义
什么时候不该用 border-box
极少数需要精确控制内容区尺寸的场景，比如自绘 canvas 容器、需要 JS 动态读取 clientWidth - paddingLeft - paddingRight 的旧逻辑、或与某些 CSS-in-JS 库（如 styled-components 的某些主题 mixin）存在隐式耦合时，强行设 border-box 可能导致计算错位。
更常见的是调试阶段：当你发现某个元素尺寸异常，又确认没写错 width，第一反应不该是调 box-sizing，而是先用浏览器开发者工具看 computed 样式里的 box-sizing 值——很多问题其实源于继承或层叠冲突，而不是取值本身。
真正难处理的，是混合使用不同 box-sizing 的遗留项目：父容器设了 border-box，子元素某处又被 reset 成 content-box，这种交错会让尺寸推导变得反直觉。
