<p>box-sizing: border-box 使 width/height 包含 content、padding 和 border，避免布局撑开；全局启用推荐 { box-sizing: border-box; } 或更精确的 , ::before, ::after { box-sizing: border-box; }。</p>
设置宽度后布局被撑开，通常是因为元素的 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;
} 
