默认标准盒模型下padding会额外增加元素总宽高，如width:200px+padding:10px→实际宽220px；改用box-sizing:border-box后padding计入width内，不撑大元素。
padding 默认会让元素变大
在标准盒模型（box-sizing: content-box，浏览器默认）下，padding 会**额外增加**元素的总宽高。比如：width: 200px + padding: 10px → 实际占用宽度是 220px（左右各加 10px）。这常导致布局错位，尤其在固定容器内塞多个带 padding 的子元素时。
常见错误现象：
- 设置
width: 100%的按钮，加了padding后溢出父容器 - Grid 或 Flex 项因 padding 累加，破坏等分布局
- 用
max-width限制图片容器，但 padding 让内容区实际更窄，却仍占满整行
box-sizing: border-box 让 padding “挤进” width 内
把 box-sizing 设为 border-box 后，width 和 height 指的是**最外层边框边界**的尺寸，padding 和 border 都从这个尺寸里“扣除”，不再往外撑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置推荐写法：
* { box-sizing: border-box; }（注意：伪元素也要覆盖，可加*::before, *::after） - 只对特定组件改：比如表单控件、卡片类容器，显式加
box-sizing: border-box - 不要混用：同一项目中避免部分组件用
content-box、部分用border-box，否则计算逻辑割裂，调试困难
flex/grid 容器里的子项 padding 行为没变，但影响方式不同
即使子项设了 box-sizing: border-box，它在 display: flex 或 grid 容器中依然受主轴/交叉轴尺寸约束。此时 padding 不再“撑开”自身宽高，但会影响内容对齐和可用空间。
关键点：
-
flex-basis或grid-template-columns指定的尺寸，是包含 padding 的最终尺寸（前提是子项用了border-box） - 如果子项
flex: 1，且父容器有gap，那padding会进一步压缩内容区域，但不会突破分配到的 flex 区域 - 调试技巧：用浏览器开发者工具的“layout”面板，勾选“Show padding”，直观确认 padding 是否被计入尺寸
兼容性与重置风险要注意
box-sizing 在 IE8+、所有现代浏览器都支持，基本无兼容问题。但重置时容易踩坑：
-
* { box-sizing: border-box }会影响和，可能导致滚动条计算异常（尤其配合height: 100vh时） - 第三方 UI 库（如 Bootstrap 4+ 已默认重置，但某些旧插件可能依赖
content-box）可能样式错乱，需检查是否覆盖了其box-sizing -
textarea、input[type="button"]等原生控件在部分浏览器中默认box-sizing: border-box，重置后反而可能打破一致性——建议用all: revert或针对性重置
实际尺寸是否变化，取决于你有没有切换 box-sizing；而真正难处理的，是那些隐式依赖默认 content-box 行为的老代码，一并重置后反而要逐个调样式。
