根本原因在于box-sizing: content-box导致width: 100%不包含padding/border；需在Computed面板验证是否生效，Flex中input还需min-width: 0及父容器overflow: hidden，margin和100vw溢出则与box-sizing无关。
根本不是 width: 100% 写错了，而是浏览器默认用 box-sizing: content-box 算尺寸——width: 100% 只管内容区，padding 和 border 会额外加在它外面，总宽必然超限。
检查 computed box-sizing 是否真为 border-box
写了 box-sizing: border-box 不等于生效。唯一可信方式是打开开发者工具，切到「Computed」面板，查目标元素的 box-sizing 值——如果被划掉，说明被更高优先级规则覆盖了。
- 常见失效原因：只写了
* { box-sizing: border-box; }，漏了*::before和*::after，伪元素仍按content-box渲染 - CSS-in-JS（如 styled-components）或 Shadow DOM 中，全局重置无法穿透，得在对应 scope 内单独声明
- 某些 UI 库（如 Bootstrap、Ant Design）自己重置了
box-sizing，但加载顺序在你的样式之后，直接覆盖了你的设置
Flex 布局中 input 必须加 min-width: 0
input 在 Flex 容器里默认 min-width: auto，哪怕 box-sizing 正确，浏览器也会拒绝收缩，宁可撑破容器也不压缩长内容（比如 URL 或连续无空格字符串）。
- 只加
box-sizing: border-box不够，必须配min-width: 0 - 更彻底写法：
flex: 1 1 0;（等价于flex-basis: 0），压制初始宽度 - 别漏掉
overflow: hidden——它得加在input的父容器上，否则裁剪逻辑不触发
margin 和 100vw 是 box-sizing 修不了的“真溢出”
box-sizing: border-box 只影响 width/height、padding、border 的归属关系，对 margin 完全无效——它永远算在总尺寸之外。
立即学习“前端免费学习笔记（深入）”；
- 如果溢出是因为
margin: 10px，加了border-box没用 -
width: 100vw是按视口宽度算的，和父容器无关；加了padding后，总宽 = 视口宽 + 左右padding，必然溢出——这不是盒模型问题，是单位选错了，应改用width: 100% -
body默认有margin: 8px，整个页面先多出 16px 总宽，得清掉：body { margin: 0; }
最常被跳过的动作：没进 Computed 面板验证，就以为“写了就生效”；还有就是忘了 min-width: 0 在 Flex 场景下对 input 的必要性——这两点一漏，再细的样式也白调。
