如何解决移动端100%宽度超出屏幕问题_CSS的box-sizing属性应用-css教程-PHP中文网

根本原因是默认box-sizing: content-box使width: 100%仅含内容区，padding和border额外叠加导致溢出；需设box-sizing: border-box（含::before、::after），并配合min-width: 0（flex/grid中）、验证Computed值、处理替换元素。

如何解决移动端100%宽度超出屏幕问题_css的box-sizing属性应用

移动端 width: 100% 溢出屏幕，90% 是因为默认 box-sizing: content-box 把 padding 和 border 算在宽度外面 —— 加上 box-sizing: border-box 就能治本，但必须覆盖伪元素、验证生效、配合 min-width: 0（尤其在 flex 容器里）。

为什么移动端 input/textarea 一设 `width: 100%` 就撑破屏幕

移动端浏览器（包括 Safari iOS、Chrome Android、X5 内核）对表单控件有默认 padding（如 iOS Safari 给 input 加了约 12px 左右内边距），而它们又继承 box-sizing: content-box。结果就是：width: 100% 只占父容器内容区，再叠加上自身 padding，总宽轻松超视口。

父容器若本身有 padding（比如 .form-group { padding: 0 16px; }），子元素 width: 100% 实际只对 100% − 32px 生效，再加自身 padding 更易错位
微信 X5 内核（v3.7 以下）对 *::before, *::after 的 box-sizing 重置支持不稳，漏掉就可能让某些组件内图标或伪元素溢出
别信“我写了 box-sizing: border-box”，一定要进开发者工具「Computed」面板看真实值 —— Bootstrap 或其他框架的 reset 样式可能覆盖你写的规则

怎么写才真正生效：全局重置的最小安全写法

光写 * { box-sizing: border-box; } 不够，伪元素（::before/::after）可能漏掉；老项目不敢动全局？至少得保关键路径。

推荐写法（含伪元素兜底）：

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

微信 X5 兜底（v3.7 以下）可追加：
```
html {
  box-sizing: border-box;
}
```

老项目保守策略：只针对高频出问题的元素显式设置，例如

input,
textarea,
select,
.form-control,
.card-content > * {
  box-sizing: border-box;
}

flex 容器里 `width: 100%` 还溢出？`min-width: 0` 才是关键

即使加了 box-sizing: border-box，在 display: flex 的父容器中，子项（尤其是 img、input 这类替换元素）默认 min-width: auto，会阻止收缩 —— 此时 padding 仍可能导致横向滚动条。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须配对设置：

.flex-item {
  width: 100%;
  min-width: 0; /* 强制允许收缩 */
  box-sizing: border-box;
}

grid 同理：用 grid-template-columns: 1fr 时，子项也需 min-width: 0，否则 box-sizing 无效
绝对定位元素（position: absolute）的 width: 100% 是按父元素的 padding box 计算的，不是 content box —— 这点容易误判尺寸，别靠猜，用「Computed」看实际参考基准

图片、iframe、表格这些“硬骨头”怎么办

box-sizing: border-box 对 img、iframe、table、td 默认无效 —— 它们是替换元素或有特殊盒模型逻辑，不能光靠 box-sizing 解决。

img 和 iframe：必须加 max-width: 100%; height: auto;，否则 width: 100% 可能被忽略或撑开
table 和 td：需显式声明 box-sizing: border-box，否则默认无视
长文本强制不换行（white-space: nowrap）：哪怕 box-sizing 正确，也会因内容过长溢出，得配 overflow-x: auto 或 text-overflow: ellipsis