必须给该元素自身设置box-sizing: border-box，因默认content-box下width:100%仅指内容区宽，padding和border额外叠加导致总宽超限；需通过computed面板验证生效，并覆盖伪元素。
直接结论：必须给该元素自身设置 box-sizing: border-box，而不是只设父容器；不生效往往是因为选择器权重不足、被覆盖，或漏掉了伪元素。
为什么 padding 会让 width: 100% 的元素撑破父容器
默认 box-sizing: content-box 下，width: 100% 只管内容区宽度，padding 和 border 是额外加在它外面的。比如父容器宽 300px，子元素写 width: 100%; padding: 12px;，实际占宽就是 300px + 24px = 324px —— 溢出是必然的。
常见错误现象：
- 横向滚动条意外出现
-
max-width: 100%失效 - Bootstrap 卡片右侧留白或截断
- 移动端视口内触发非预期拖拽
必须显式作用于子元素，box-sizing 不继承
父容器设了 box-sizing: border-box 对子元素完全无效。它只改变当前元素自身的盒模型计算逻辑。
- 最稳妥写法：
* { box-sizing: border-box; }（含全局伪元素） - 若已有重置样式，检查是否漏掉
*::before, *::after—— 它们常被用于清除浮动或装饰，一旦仍是content-box，就可能悄悄撑开布局 - 局部修复时，务必写在具体子元素上，例如：
textarea, .card-body { box-sizing: border-box; } - 用开发者工具看 computed 样式，确认
box-sizing没被划掉（即未被更高优先级规则覆盖）
这些地方 box-sizing 也得单独处理
box-sizing: border-box 解决的是尺寸计算逻辑问题，但对以下情况无直接作用：
-
img、svg、iframe等替换元素：必须额外加max-width: 100%和height: auto - flex 子项中的
input、button：即使box-sizing正确，也要显式设min-width: 0才能收缩 - 表格（
table）：无视max-width和box-sizing，得靠table-layout: fixed+width: 100% -
white-space: nowrap的文本：需配合overflow-wrap: break-word或text-overflow: ellipsis
最容易被忽略的一点
当你在开发者工具里看到元素“显示宽度”刚好等于父容器，却仍有横向滚动条，大概率是某个子元素（比如伪元素、未重置的 box-sizing、或一个没加 max-width: 100% 的 img）在静默撑开布局。这时候不能只盯着主元素，得一层层点开子节点看 computed width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
