根本原因是box-sizing默认为content-box，width:100%仅指内容区宽，padding和border额外叠加导致总宽超限；须通过computed面板验证box-sizing是否真为border-box，并配合body{margin:0}、min-width:0（flex子项）等协同修复。
不是width: 100%写错了，而是它默认只管内容区——padding 和 border 会额外加在外面，总宽必然超限。
box-sizing 还是 content-box？先看 Computed 面板
写了box-sizing: border-box不等于生效。唯一可信依据是打开开发者工具，切到「Computed」面板，查目标元素的box-sizing值。如果显示content-box，那width: 100%就真不包含 padding 和 border。
常见失效原因包括：
-
Bootstrap或Tailwind等框架样式加载在你的 CSS 之后，直接覆盖了设置 - 只写了
* { box-sizing: border-box; }，漏了*::before, *::after，伪元素仍按content-box渲染 -
input、textarea等表单元素自带 UA 样式，padding 和 border 不会被继承重置
Flex 容器里，min-width: 0 比 box-sizing 还关键
哪怕box-sizing: border-box已生效，input 在 Flex 子项中仍会默认保持min-width: auto，浏览器宁可撑破容器也不压缩长文本（比如 URL 或连续无空格字符串）。
必须显式加：
-
min-width: 0到该表单元素本身 -
overflow: hidden到它的父容器（否则裁剪逻辑不触发） - 若父容器是
display: flex且子项用了width: 100%，这两者缺一不可
100vw 和 body 默认 margin 是 box-sizing 修不了的“真溢出”
box-sizing: border-box 只影响 width/height、padding、border 的归属关系，对margin完全无效——它永远算在总尺寸之外。
典型真溢出场景：
-
body默认有margin: 8px，整个页面先多出 16px 总宽，得清掉：body { margin: 0; } -
width: 100vw是按视口宽度算的，加了padding: 16px后，总宽 = 视口宽 + 32px → 必然溢出 - 父容器设了
padding: 0 20px，它的 content 区比总宽少 40px；子元素width: 100%只填这 260px（假设总宽 300px），再叠自身 padding，又超了
最常被跳过的动作：没进 Computed 面板验证就以为“写了就生效”，还有就是忘了min-width: 0在 Flex 场景下对input的必要性——这两点一漏，再细的样式也白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
