CSS中如何防止padding撑破容器布局_全局声明border-box属性-css教程-PHP中文网

box-sizing: border-box 能防止 padding 撑破容器，因其使 width 包含 padding 和 border，总宽严格等于设定值；默认 content-box 下 width 仅限内容区，加 padding/border 后额外扩张导致溢出。

css中如何防止padding撑破容器布局_全局声明border-box属性

box-sizing: border-box 为什么能防止 padding 撑破容器

因为浏览器默认用 content-box 计算宽度：你写 width: 300px，它只管内容区；加上 padding: 15px 和 border: 1px，实际总宽变成 300 + 30 + 2 = 332px，父容器没设 overflow 就直接溢出。换成 border-box 后，width: 300px 指的就是最外边框的总宽，padding 和 border 往里扣，不往外涨——这才是人眼看到的“这个盒子就是 300px 宽”。

全局声明怎么写才真正生效，而不是白写

很多人写了 * { box-sizing: border-box; } 却发现某些元素还是撑破，问题不在属性本身，而在继承链和覆盖优先级：

* { box-sizing: border-box; } 优先级极低，遇到 input { box-sizing: content-box; } 这类更具体的选择器就会被干掉
伪元素（::before/::after）不会自动继承，Flex/Grid 子项里常因此漏掉

推荐写法（已验证在 Chrome/Firefox/Safari/Edge 中稳定）：

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

必须放在所有其他 CSS 规则之前，尤其要早于 normalize.css、UI 库样式（如 Element UI 旧版会显式重置为 content-box）

即使用了 border-box，这些地方照样会撑破

别以为加了全局声明就万事大吉。以下场景中 box-sizing 依然“无能为力”，得额外处理：

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

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

下载

flex 子项未设 min-width: 0：默认 min-width: auto 会阻止收缩，长文本或图片直接顶破容器
max-width 和 min-width 同样受 border-box 影响——很多人只改 width，结果 max-width: 400px 还是被 padding 推爆
input、textarea 在旧版 Safari（iOS 12 及更早）或 IE 中可能回退为 content-box，需单独加固：input, textarea, button { box-sizing: border-box; }
width: auto 或 width: fit-content 时，box-sizing 不参与计算——它只约束你显式写的 width/height 值