box-sizing: border-box 将 padding 和 border 计入 width/height，使尺寸更直观；全局启用需用 , ::before, \::after 重置并置于样式表最前，兼容 IE8+（需 -webkit- 前缀）。
box-sizing: border-box 是什么，为什么它能解决盒子模型兼容问题
默认的 CSS 盒子模型（content-box）下，width 和 height 只包含内容区域，而 padding 和 border 会额外增加元素总尺寸。这导致在栅格布局、等宽卡片或响应式表单中，容易出现“设了 50% 却换行”“加了 1px 边框就溢出容器”等问题。
border-box 把 padding 和 border 算进 width/height 里，让尺寸更符合直觉——你设多少就是多少，不用手动减去内边距和边框。
如何全局启用 border-box 并避免意外覆盖
最稳妥的做法是用通配符重置所有盒模型，但要注意几个关键点：
-
*选择器性能略低，但现代浏览器影响可忽略；更推荐*, *::before, *::after，确保伪元素也受控 - 必须放在所有其他样式之前，否则后续显式设置的
box-sizing: content-box会覆盖它 - 某些第三方组件（如旧版 Bootstrap 3 的某些插件）可能依赖
content-box，若遇到布局错乱，可用局部重写：.legacy-widget { box-sizing: content-box; }
*, *::before, *::after {
box-sizing: border-box;
}
border-box 在 flex / grid 布局中的实际表现差异
在 display: flex 或 display: grid 容器中，box-sizing 不影响主轴/交叉轴的计算逻辑，但它直接影响子项的尺寸基准：
立即学习“前端免费学习笔记（深入）”；
