加box-sizing: border-box可使width包含border和padding；未设置时width:100%仅指内容区，border会额外叠加导致溢出，必须全局声明, ::before, *::after { box-sizing: border-box; }才真正生效。
直接加 box-sizing: border-box 就能解决，不加它的话，width: 100% 和 border 是叠加关系，不是包含关系。
为什么加了 border 就溢出
默认 box-sizing: content-box 下，width: 100% 只算内容区宽度；border（比如 border: 2px solid #000）会额外加在左右两侧，总宽 = 父容器宽 + 左右 border 宽度。哪怕父容器是 300px，子元素设了 width: 100% + border: 2px，实际占宽就是 304px —— 必然撑破。
这不是 bug，是 CSS 盒模型原始设计逻辑，但现代布局里它几乎总是干扰项。
怎么加 box-sizing 才真正生效
只写 * { box-sizing: border-box; } 不够，伪元素（::before、::after）可能漏掉，仍按 content-box 渲染。必须写全：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}老项目不敢全局改？优先覆盖高频出问题的元素：
-
input、textarea、select这些自带 border 的表单控件 - 带
padding和border的卡片类容器，比如.card、.form-group > * - 第三方组件内部样式没重置时，针对性加在 wrapper 上
border 溢出但 box-sizing 没起作用？检查这几个点
常见失效原因不是代码没写，而是被覆盖或没触达：
- 浏览器开发者工具「Computed」面板里，确认目标元素的
box-sizing值确实是border-box，别只信源码写了 - 某些 UI 框架（如 Bootstrap v5.3+）自己重置了
box-sizing，但没包含*::before, *::after，导致部分图标或装饰性伪元素仍溢出 - CSS-in-JS 库（如 styled-components）服务端渲染顺序错乱，首屏闪动，重置样式得塞进
<head>最顶部 -
table和td默认无视box-sizing，必须显式声明才生效
border-box 解决不了的“溢出”，别硬套它
box-sizing: border-box 只管 content、padding、border 的归属，对 margin 完全无效——如果溢出是因为 margin: 10px，加了也没用。
绝对定位元素（position: absolute）的 width: 100% 是按父元素的 padding box 计算的，不是 content box，这点容易误判尺寸。
真正容易被忽略的是：即使你加了 box-sizing: border-box，只要父容器自身有 padding，子元素的 width: 100% 就不是“占满父容器总宽”，而是“占满父容器内容区”。这时候得看设计意图——是要对齐内容区，还是对齐边框。
