推荐使用 box-sizing: border-box，因为它使元素宽高符合视觉直觉——设置 width: 300px 即实际占用 300px 水平空间，避免 padding 和 border 导致宽度意外增加、溢出或布局错位，且一行 * { box-sizing: border-box; } 即可全局生效。

推荐使用 box-sizing: border-box，是因为它让元素的宽高行为更符合视觉直觉和实际布局需求——你设的 width: 300px，就是它真正占满的水平空间，不会因为加了 padding 或 border 就悄悄变宽、撑破容器。

避免宽度“偷偷变大”

默认的 content-box 模型中，width 只算内容区。一旦加上 padding: 16px 和 border: 2px，总宽会多出 36px（左右各算），极易导致：

• 并排的两个 width: 50% 元素因 padding/border 溢出而换行
• 卡片或表单控件在小屏上触发横向滚动条
• 响应式栅格中列宽错位，调试时反复减去 padding 值

响应式布局更稳定

百分比宽度 + 内边距是响应式设计常见组合。用 border-box 后：

• width: 100%; padding: 1rem; 仍严格贴合父容器，不溢出
• Flex 或 Grid 子项添加 padding 不影响主轴尺寸分配
• 媒体查询切换时，尺寸变化平滑，无意外换行或错位

简化组件开发与复用

卡片、按钮、输入框等通用组件常需统一留白和边框。启用 border-box 后：

• 可直接定义 width: 280px; padding: 12px; border: 1px solid #ccc;，总宽恒为 280px
• 嵌套结构中，多层 padding 不会层层叠加导致失控
• 团队协作时样式预期一致，减少“为什么这个 div 比别的宽？”类问题

一行代码就能全局生效

无需逐个设置，项目开头加这一句即可：

* { box-sizing: border-box; }

它覆盖所有元素（包括伪元素），是现代 CSS 开发的事实标准。几乎所有主流 UI 库（Bootstrap、Tailwind、Ant Design）都默认采用该模式。