直接使用 box-sizing: border-box 可使 width/height 包含 padding 和 border，避免内边距撑大总宽度；全局启用应写 **, *::before, *::after { box-sizing: border-box; } 并置于 CSS 顶部。
直接改 box-sizing: border-box，内边距就不会撑大总宽度了。 这不是“技巧”，而是 CSS3 盒模型的底层行为切换——它让 width 和 height 表示的是元素最终在页面上占位的完整尺寸（content + padding + border），而不是只管内容区。
为什么 padding 会“撑开”盒子？
因为默认盒模型是 content-box：你写 width: 200px; padding: 10px;，浏览器理解为“内容宽 200px，再加左右各 10px 内边距，总宽变成 220px”。这在嵌套布局、栅格对齐或响应式断点时极易错位。
常见错误现象包括：
- 设了
width: 100%的容器，加了padding后横向溢出父容器 - 两个并排
width: 50%的 div，各自加padding: 10px后换行 - 表单控件（如
input）在不同浏览器中尺寸不一致，尤其在移动端
如何全局启用 border-box 模式
最稳妥的做法是一上来就重置所有元素的盒模型：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}这个写法覆盖了所有元素及其伪元素，避免漏掉 ::before 或 ::after 导致的意外尺寸偏差。注意几点：
- 必须放在 CSS 文件最顶部，否则可能被后续样式覆盖
- 某些 UI 库（如 Bootstrap 4+、Tailwind）已默认包含该重置，但需确认是否被项目中其他 reset.css 覆盖
-
input、textarea、button等原生表单控件在旧版 Safari/IE 中可能仍回退为content-box，建议额外加固：input, textarea, button { box-sizing: border-box; }
border-box 下 padding 还要手动减 width 吗？
不需要。这是最容易踩的坑：有人写了 box-sizing: border-box，还继续用 width: calc(100% - 20px) 去“抵消” padding，结果反而窄了。
正确逻辑是：
- 设
width: 100%+padding: 10px→ 实际总宽 = 100%，内容区自动压缩为100% - 20px - 设
width: 300px+padding: 20px+border: 2px solid→ 实际总宽严格等于300px，内容区只剩300px - 40px - 4px = 256px - 只有当你需要“固定内容区宽度 + 可变 padding”时，才考虑
calc()，但这属于少数场景（如图标文字组合中图标定宽、文字自适应）
验证是否真正生效
别只信代码，打开浏览器开发者工具看两处：
- 选中元素 → “Computed” 面板 → 检查
box-sizing值是否为border-box - 同个面板下拉到 “Metrics” → 鼠标悬停在蓝色宽度条上，观察“Total width”数值是否随
padding增减而保持不变 - 特别注意伪元素（如
div::after）是否也被纳入计算——通配符重置能覆盖它，但单独写的类选择器不会
复杂点在于：有些 CSS-in-JS 库或 Shadow DOM 场景下，* 通配符不生效，得在组件级显式声明 box-sizing: border-box；另外，iframe 内部样式完全隔离，需单独处理。
