栅格系统必须用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 却忘了它也受此影响，就可能出现尺寸计算意外
• 这种隐式继承比显式声明更难排查，尤其在动画或动态插入伪元素的场景中

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！