width: 100% + padding 溢出是 content-box 默认规则所致：width 仅指内容区，padding 和 border 额外叠加；修复需用 box-sizing: border-box（须覆盖 *、::before、::after），并验证 Computed 面板生效，同时注意 margin、伪元素、绝对定位及 min-width: 0 等协同影响。
width: 100% + padding 溢出不是写错了，是 content-box 在算账
浏览器默认用 box-sizing: content-box，此时 width: 100% 只管内容区宽度，padding 和 border 是额外加在它外面的。比如父容器 content 宽 300px，子元素设 padding: 12px，实际总宽就是 300px + 24px = 324px —— 必然溢出。
更隐蔽的是：父容器自己有 padding: 0 20px，它的 content 区只剩 260px；子元素 width: 100% 就只占这 260px，再叠上自身 padding，又超了。
-
input、textarea等表单元素自带浏览器默认padding和border，不显式重置的话，width: 100%几乎必溢出 -
td、th默认无视box-sizing，必须显式声明才生效 - 绝对定位元素（
position: absolute）的width: 100%是按父元素的 padding box 计算的（含父padding），不是 content box，尺寸判断容易误判
box-sizing: border-box 不是万能解药，得看它真生效没
写了 box-sizing: border-box 不等于起作用。必须进浏览器开发者工具，切到「Computed」面板，直接查目标元素的 box-sizing 值——这是唯一可信依据。
常见失效原因：
- 其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如
styled-components）SSR 注入顺序错乱，首屏闪动 - 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
全局重置推荐写法：* , *::before, *::after { box-sizing: border-box; }，漏掉伪元素就可能在某些场景下翻车。
就算 border-box 生效了，溢出还可能来自这几个地方
box-sizing: border-box 只影响 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
- 如果溢出是因为
margin: 20px，加了border-box没用 - Flex 布局中，
input默认min-width: auto，哪怕box-sizing正确，也会拒绝收缩，得额外加min-width: 0 -
width: 100vw配padding也溢出？不是盒模型问题，是单位选错了：100vw是按视口宽算的，加padding后总宽 = 视口宽 + padding，必然超限
修复后还要验证“视觉意图”是否达成
即使 box-sizing: border-box 生效、margin 清除、min-width: 0 加上，仍要确认设计目标：
- 是要对齐父容器的 content 区？还是对齐父容器的边框（即视觉上“顶满”）？
- 若父容器有
padding，子元素width: 100%天然就不顶边——这时候要么改用绝对定位（注意它参照的是父 padding box），要么把留白逻辑移到父层 - 混合 rem/vw 和固定像素
padding的响应式项目里，小屏下溢出往往更隐蔽，得在真机或模拟器里多测几个断点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
