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 不影响主轴/交叉轴的计算逻辑，但它直接影响子项的尺寸基准：
立即学习“前端免费学习笔记（深入）”；
- 设
flex: 1的子项，其最终宽度仍以border-box尺寸参与分配，不会因 padding 溢出 - 使用
grid-template-columns: 1fr 1fr时，两个列宽相等，且各自 padding/border 都被包在 1fr 内部，无需担心撑破 - 注意：
min-width和max-width也按border-box解释，所以min-width: 200px指的是“内容+padding+border 总宽 ≥ 200px”
IE8 及更老浏览器的兼容性现实
box-sizing 在 IE8+ 原生支持，但需要带前缀才能在 IE8 中生效：
.my-element {
-webkit-box-sizing: border-box; /* Safari <= 5.1 */
-moz-box-sizing: border-box; /* Firefox <= 19 */
box-sizing: border-box;
}不过 IE8 已基本退出主流支持范围；若项目仍需兼容，建议用 Autoprefixer 自动补全，而不是手写前缀。真正容易被忽略的是：IE8 不支持 *::before 和 *::after，所以全局重置时要拆成两行：
* { box-sizing: border-box; }
*:before, *:after { box-sizing: border-box; }还有个细节：某些移动端 WebView（如 Android 4.3 的原生浏览器）对 box-sizing 的继承行为不一致，保险起见，对关键布局容器显式声明比依赖全局重置更可靠。
