box-sizing: border-box必须生效且配合min-width: 0才能使width: 100%真正有效；需在computed面板验证是否被覆盖，注意伪元素、css-in-js、shadow dom、ui库重置冲突及flex布局下替换元素的默认行为。
根本不是 width: 100% 写错了，而是浏览器默认用 box-sizing: content-box 算尺寸 —— 宽度只管内容区，padding 和 border 全部额外叠加在外。
怎么看 box-sizing 到底生效没？
写了 box-sizing: border-box 不等于它真起效。唯一可信方式是打开开发者工具，切到「Computed」面板，查目标元素的 box-sizing 值：
- 如果显示
content-box（哪怕只有一条横线划掉你的规则），那width: 100%就一定不包含padding和border - 常见失效原因：
*::before和*::after没被覆盖，伪元素仍按content-box渲染 - CSS-in-JS（如
styled-components）或 Shadow DOM 中，全局重置无法穿透，得在对应 scope 内单独声明 - 某些 UI 库（如 Bootstrap、Ant Design）自己重置了
box-sizing，但加载顺序在你的样式之后，直接覆盖了你的设置
Flex 容器里的 input 为什么加了 box-sizing 还撑破？
input 在 Flex 容器中默认有 min-width: auto，这是浏览器对表单控件的硬性保护：宁可撑破容器，也不压缩长内容（比如 URL 或连续无空格字符串）。
- 必须显式加
min-width: 0，否则box-sizing: border-box白搭 - 更彻底写法：
flex: 0 1 auto（等价于flex-basis: auto+flex-shrink: 1），压制初始宽度 - 别漏掉
overflow: hidden—— 它得加在input的父容器上，否则裁剪逻辑不触发
哪些元素光靠 box-sizing 解决不了？
img、iframe、svg 是替换元素，它们不响应 width: 100% 的盒模型语义；input、button 等表单控件还有内置 min-width: auto，都得针对性补漏：
-
img、iframe、video必须显式加max-width: 100%和height: auto -
input、textarea、button除了box-sizing: border-box，还得加min-width: 0（尤其在 Flex/Grid 中） - 含
white-space: nowrap的文本，盒模型再准也没用，得配text-overflow: ellipsis或用flex+overflow: hidden
最常被跳过的动作：没进 Computed 面板验证，就以为“写了就生效”；还有就是忘了 min-width: 0 在 Flex 场景下对 input 的必要性——这两点一漏，再细的样式也白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
