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