CSS设置宽度后布局被撑开，使用box-sizing: border-box解决

当为元素设置固定宽度后布局意外被撑开，根源在于CSS默认的box-sizing: content-box行为——此时width仅指内容区，padding和border会额外增加总尺寸；而通过全局启用box-sizing: border-box（推荐使用*, *::before, *::after统一重置），可让width/height直接包含content、padding与border，彻底解决尺寸失控问题，尤其在响应式栅格、表单控件和带内边距的UI组件中效果立竿见影，且现代浏览器兼容性极佳。

设置宽度后布局被撑开，通常是因为元素的 padding 和 border 被额外加到了你指定的 width 上——这是 CSS 默认的 box-sizing: content-box 行为。解决方法就是统一使用 box-sizing: border-box。

什么是 box-sizing: border-box？

启用后，元素的 width 和 height 会包含 content、padding 和 border，不再“额外撑开”。比如设 width: 200px; padding: 10px; border: 2px solid #000;，整个元素实际占用的水平空间仍是 200px，而不是 224px。

如何全局启用 border-box？

推荐在项目开头重置盒模型，一劳永逸：

* {
  box-sizing: border-box;
}
/* 或更精确地（避免影响某些替换元素） */
*, *::before, *::after {
  box-sizing: border-box;
}

哪些情况特别需要它？

• 响应式栅格布局（如 flex 或 grid 子项加 padding 后错位）
• 表单控件（input、textarea 加了 padding/border 后超出容器）
• 卡片、按钮等带内边距和边框的组件，需严格控制尺寸
• 使用 rem/em + padding 组合时，避免计算偏差

注意兼容性与例外

现代浏览器全部支持 box-sizing，IE8+ 也支持。但个别原生替换元素（如 <select>、<textarea> 在部分旧版本中）可能表现不一致，可单独重置：

input, select, textarea, button {
  box-sizing: border-box;
}

好了，本文到此结束，带大家了解了《CSS设置宽度后布局被撑开，使用box-sizing: border-box解决》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！