17370845950

width: 100% 撑破父容器是因为默认 box-sizing: content-box，使 padding 和 border 额外增加宽度；修复方法是设置 box-sizing: border-box，推荐全局重置 , ::before , *::after { box-sizing: border-box; }。

width: 100% 为什么撑破父容器

因为默认的 box-sizing 是 content-box，此时 width: 100% 只控制内容区宽度，padding 和 border 会额外加在内容区外面，导致总宽度超过父容器。

怎么立刻修复溢出问题

给元素加上 box-sizing: border-box，这样 width: 100% 就包含 padding 和 border，不会再溢出。

• 全局推荐写法：

  *, *::before, *::after {
    box-sizing: border-box;
  }

• 只针对某个元素：

  .input-field {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
  }

• 不加 box-sizing 的等效写法（不推荐）：width: calc(100% - 24px)（假设左右 padding 各 12px），但响应式下难维护

flex 或 grid 容器里还用管这个吗

仍然要管。虽然 flex item 默认不会因 padding 溢出（flex 会自动收缩），但一旦设了 min-width: auto 或显式 width: 100%，且父容器没设 overflow: hidden，padding 仍可能造成横向滚动条或布局错位。

• 常见翻车场景：input 放在 display: flex 的表单行里，又加了 padding 和 width: 100%
• 稳妥做法：所有表单控件、卡片、面板类元素统一加 box-sizing: border-box
• 检查工具：浏览器开发者工具里看元素「Computed」面板，确认 box-sizing 确实是 border-box，不是被其他样式覆盖了

老项目不敢全局改 box-sizing 怎么办

可以只对已知出问题的组件加，比如 .form-group input、.card .content 这类明确需要 100% 宽 + padding 的地方。

• 优先级注意：如果已有 box-sizing: content-box 的样式（比如某些 UI 库重置），必须用更高优先级覆盖，例如加 !important 或更具体的选择器
• IE8 及以下不支持 box-sizing，但这类浏览器现在基本不用考虑；若真有兼容需求，只能用 calc() 手动减去 padding 值
• 最隐蔽的坑：伪元素 ::before/::after 如果也设置了 width: 100% 和 padding，同样要加 box-sizing: border-box