栅格系统必须用border-box，因其确保width:25%包含padding和border，避免content-box下因内边距/边框导致列总宽超100%而换行；主流框架均全局重置*{box-sizing:border-box}以保障布局精确可控。
box-sizing: border-box 不是历史兼容补丁，而是现代前端布局的默认前提——几乎所有实际场景下，它比浏览器原生的 content-box 更可靠、更可控。
为什么栅格系统必须用 border-box
响应式栅格依赖列宽精确相加（比如 25% + 25% + 25% + 25% = 100%），但只要某列加了 padding 或 border，在 content-box 下就会溢出换行。
-
border-box让width: 25%表示“整个盒子（含 padding + border）占父容器 25%”，padding 不再挤占内容空间 - 主流框架（Bootstrap、Tailwind、Ant Design）都在全局重置中写
* { box-sizing: border-box } - 没加这句的项目，只要用了 flex 布局 + padding 的卡片或表单项，小屏下大概率出现横向滚动条
表单控件对齐离不开 border-box
input、textarea、select 在不同浏览器中默认 padding 和 border 差异极大（尤其 macOS Safari），若保持 content-box，哪怕设了 width: 100%，实际宽度也会参差不齐。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 统一用
border-box后，所有表单元素外框尺寸一致，同一行对齐不再靠 hack - 注意：某些 UI 库（如 Element Plus）已内置该规则，但自研组件库常漏掉
textarea
绝对定位拉伸时，border-box 决定 padding 是否可预测
当用 top: 0; left: 0; width: 100%; height: 100% 实现遮罩层或下拉菜单容器时，如果内部有 padding：
立即学习“前端免费学习笔记（深入）”；
-
content-box下，内容区只剩100% - 32px（假设 padding: 16px），视觉上明显“缩进” -
border-box下，100%指的是包含 padding 的整体尺寸，内容区自动适配剩余空间 - 此时
padding是布局工具，不是副作用
伪元素也受全局 border-box 影响，这点最容易被忽略
全局重置 * { box-sizing: border-box } 会作用于所有 ::before/::after，而它们常被用来画装饰边框或图标。
- 一旦你给伪元素设了
width: 20px却忘了它也受此影响，就可能出现尺寸计算意外 - 这种隐式继承比显式声明更难排查，尤其在动画或动态插入伪元素的场景中
