box-sizing: border-box使width/height包含padding和border，避免尺寸溢出；全局启用推荐html设border-box后子元素inherit；重叠主因常是flex收缩、float未清除或margin折叠，非box-sizing失效。
box-sizing: border-box 是什么
它让元素的 width 和 height 包含 padding 和 border，而不是只算 content 区域。默认的 content-box 模式下，加了 padding: 20px 和 border: 2px solid 后，实际占用宽度 = width + 40px + 4px，很容易撑破容器或导致兄弟元素重叠。
怎么全局启用 border-box 模式
最稳妥的做法是用通配符重置，但要注意 input、button 等表单控件在某些浏览器中对 box-sizing 的默认行为不一致，直接通配可能引发渲染异常：
*,
*::before,
*::after {
box-sizing: border-box;
}更推荐的是仅作用于常用布局容器：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}- 避免影响 SVG、canvas 或第三方组件内部的尺寸计算
- 确保新创建的元素默认继承
border-box - 部分旧版 Android WebView 对
inherit支持不佳，如需兼容可降级为显式声明
为什么设了 border-box 还会重叠
常见原因不是 box-sizing 没生效，而是其他布局机制在起作用：
立即学习“前端免费学习笔记（深入）”；
- 父容器用了
display: flex且子项没设flex-shrink: 0，内容超宽时被压缩变形，视觉上像“重叠” - 使用了
float但没清除，导致后续元素位置错乱 -
margin折叠（尤其是垂直方向）让间距变小，误判为重叠 - 设置了
position: absolute但没控制z-index或定位基准，造成层叠覆盖
验证是否真由 box-sizing 引起：临时把所有 padding 和 border 设为 0，看重叠是否消失。
border-box 在响应式布局中的实际影响
它本身不解决重叠，但让尺寸控制更可预测。比如一个栅格系统中两个 width: 50% 的列：
.col {
width: 50%;
padding: 16px;
border: 1px solid #ccc;
box-sizing: border-box; /* 关键：否则总宽 > 100% */
}没有 box-sizing: border-box 时，两列实际宽度 = 50% + 32px + 2px，超出父容器，触发换行或横向滚动。
注意：百分比宽度 + border-box 仍受父容器 padding 影响；若父容器有 padding，子项的 50% 是按内容区宽度计算的，容易误估可用空间。
真正复杂的点在于嵌套和混合布局——比如 grid 容器里的子项同时用了 flex 和 border-box，此时尺寸计算链变长，调试时得一层层检查 computed style 中的 width、border、padding 实际值，而不是只盯 CSS 规则。
