box-sizing 默认 content-box 是对齐错位的根源，导致 width/height 仅含内容区，padding/border 额外增加引发尺寸不一致；全局设 、::before、*::after { box-sizing: border-box } 可统一盒模型。
box-sizing 默认 content-box 是对齐错位的根源
会，而且是绝大多数对齐偏移的底层原因。默认 box-sizing: content-box 让 width 和 height 只管内容区，padding 和 border 额外加在外部——这意味着你写的 width: 200px 在实际渲染中可能是 242px（含 padding: 16px 和 border: 1px），而另一个没设 padding 的兄弟元素仍是 200px，视觉上立刻“不齐”。
- 卡片并排时底部参差、换行错位，常因某张卡有
padding而另一张没有 - 表单控件（
input、select）默认就是content-box，width: 100%+padding必然溢出容器 - Flex 容器中
align-items: stretch失效，因为子项真实高度不一致，拉伸起点就不同
全局启用 border-box 是最省心的解法
把 width 和 height 理解为“最终占位尺寸”，是现代 CSS 布局的共识。只需在项目入口 CSS 中加这一行：
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素（包括伪元素）都按“设定即所得”计算尺寸，padding 和 border 自动从 width 里扣减，内容区自动压缩——你设 width: 200px; padding: 20px; border: 2px，总宽就是稳稳的 200px。
- 别只写
*，漏掉*::before和*::after会导致伪元素仍走content-box，比如某些图标或装饰线错位 - IE8+ 支持
border-box，但不支持inherit，所以不能靠父级继承，必须通配符显式覆盖 - 第三方 UI 库（如 Ant Design、Element Plus）通常已重置，但自定义组件或内联样式仍可能意外覆盖
对齐失效时，先查 computed width 是否一致
当 flex 卡片底边不齐、grid 列宽忽大忽小，不要急着调 justify-content 或 gap，先打开开发者工具，选中元素，在「Computed」面板里看 width 和下方 border-box size 是否相等。如果不等，说明盒模型没统一，box-sizing 没生效或被局部覆盖。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 2px dashed red能直观对比元素真实占位和预期是否吻合（outline不参与盒模型计算） - 检查是否混用了
display: inline-block和display: flex子项，它们的基线对齐逻辑完全不同 - 表格（
table）元素默认 display 行为特殊，即使父容器是 flex，也需额外加align-self: center或包裹一层div
个别场景仍需 content-box：别一刀切
不是所有地方都要 border-box。当你需要精确控制内容区域大小，并让 padding 不影响其尺寸时，content-box 反而是更直接的选择——比如富文本编辑器的输入框，内容宽度必须严格匹配字体度量，此时可局部重置：
.editor-input {
box-sizing: content-box;
width: 100%;
padding: 8px;
/* 内容区宽度 = 100%，padding 额外增加 */
}- 全局
border-box是基础，局部content-box是例外，要加注释说明意图 - 避免在媒体查询里来回切换
box-sizing，这会让响应式调试变得不可预测 - 真正难的不是写对代码，而是团队所有人对“width 就是总宽”形成肌肉记忆——规范越早落地，后期排查成本越低
