box-sizing: border-box 使 width/height 包含 content、padding 和 border，避免布局撑开；全局启用推荐 { box-sizing: border-box; } 或更精确的 , ::before, ::after { box-sizing: border-box; }。

设置宽度后布局被撑开，通常是因为元素的 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+ 也支持。但个别原生替换元素（如 、 在部分旧版本中）可能表现不一致，可单独重置：

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