不是bug，是box-sizing:content-box默认行为——width仅指内容区，padding和border额外叠加导致溢出；需全局设置, ::before, *::after{box-sizing:border-box}并验证computed面板生效，同时注意margin、伪元素、绝对定位及flex/grid布局协同影响。
不是 bug，是 box-sizing: content-box 的默认行为——你写的 width: 100% 或 width: 200px 只管内容区，padding 和 border 是额外加在外面的。
box-sizing: content-box 是怎么“撑破”的
浏览器默认用 content-box，此时元素总宽 = width + 左右 padding + 左右 border。比如父容器宽 300px，子元素写 width: 100%; padding: 12px;，实际占宽就是 300px + 24px = 324px，必然溢出。
- 表单元素（
input、textarea）自带浏览器默认padding和border，不显式重置的话，width: 100%几乎必溢出 -
td、th默认无视box-sizing，必须显式声明才生效 - 绝对定位元素（
position: absolute）的width: 100%是按父元素的 padding box 计算的（含父级padding），不是 content box，尺寸判断容易误判
为什么写了 box-sizing: border-box 还是溢出
写了不等于生效。唯一可信依据是打开开发者工具 → 「Computed」面板 → 查目标元素的 box-sizing 值是否真为 border-box。
- 常见失效原因：其他样式规则优先级更高（比如某条
div { box-sizing: content-box }覆盖了你的设置） - CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算 - 全局重置只写
* { box-sizing: border-box; }不够，必须写成* , *::before, *::after { box-sizing: border-box; }
flex / grid 容器里 padding 溢出的特殊处理
box-sizing: border-box 解决不了所有问题。在 flex 或 grid 中，溢出常因布局逻辑而非盒模型本身：
- flex 子项设了
width: 100%+padding，但父容器没设min-width: 0→ flex 项拒绝收缩，长文本或图片直接顶破容器 - grid 子项用
width: 100%+padding，但网格轨道没留足空间 → 优先用grid-template-columns: 1fr或改用justify-items: stretch - 对 flex 子项同时设
width和flex（如flex: 1; width: 100%）会触发尺寸冲突，建议二选一 -
margin导致的溢出，box-sizing完全无效——它只管content/padding/border，margin是外部间距，得靠gap、calc()或把padding移到父级
真正要注意的是：不是所有“看起来像 padding 溢出”的问题都该加 box-sizing: border-box；得先确认是盒模型膨胀，还是 flex 主轴计算、表格单元格默认行为、伪元素遗漏、或 margin/white-space/transform 等干扰因素。盲目加 border-box 可能掩盖真实矛盾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
