box-sizing: border-box使width/height包含padding和border，避免布局溢出；推荐全局设为*, *::before, *::after { box-sizing: border-box; }，但表单控件等需谨慎处理。
padding 会改变元素实际尺寸，是因为浏览器默认用 content-box 盒模型——你设的 width 和 height 只算内容区，padding 和 border 全部额外加在外面。解决它最直接有效的办法，就是全局启用 border-box。
为什么必须全局设置 * { box-sizing: border-box; }
局部改某个类，容易漏掉伪元素、第三方组件或动态插入的节点，导致布局不一致。比如：::before 和 ::after 默认仍是 content-box，它们带 padding 时照样撑开。
全局重置能覆盖所有情况，包括未来新增的元素。
- 必须连同
*::before和*::after一起写，否则伪元素不受控 - 现代项目可忽略 IE8 以下兼容，不用加
-moz-或-webkit-前缀 - 如果项目已上线，先在局部容器（如
.app）上测试，再逐步推广
box-sizing: border-box 改变的是什么计算逻辑
它让 width 和 height 表示“总宽高”，即包含内容区 + padding + border。你写 width: 200px; padding: 16px;，元素就老老实实占 200px，内容区自动压缩到 168px（左右各减 16px）。
- 不再需要手动写
width: calc(100% - 32px)这类反人类表达式 -
max-width: 100%在有padding的父容器里也能正常约束子元素宽度 - 但注意：
margin始终不参与盒模型计算，它永远是“外部”的
哪些场景下 box-sizing: border-box 仍会失效
不是所有“看起来被 padding 撑开”的问题都能靠它解决。常见误判点：
立即学习“前端免费学习笔记（深入）”；
- 子元素设了
width: 100%，父元素有padding且没设box-sizing: border-box→ 子元素按父 content width 计算，结果溢出 - Flex 子项同时写了
width: 200px和flex: 1→ 尺寸冲突，box-sizing不干预 flex 计算逻辑 - 百分比
padding-top: 20%→ 它永远按父元素width计算，和父height无关，box-sizing对此无影响 - 文本内联换行或空格导致视觉“撑出”，不是尺寸问题，而是
white-space或font-size引起的
调试时怎么快速确认是不是 box-sizing 问题
打开 Chrome 或 Firefox 开发者工具，选中元素，在 “Computed” 面板里搜 box-sizing，看值是 content-box 还是 border-box；再看 “Layout” 标签页右上角的小图标，它会直观显示当前盒模型类型和各区域尺寸。
- 如果
box-sizing是content-box，且 “Layout Width” 明显大于 “Width” 值，基本就是它了 - 勾选 “Show padding area”，能立刻看到
padding是否挤压了内容或重叠了兄弟元素 - 不要只看 Styles 面板里的声明，有些框架或 reset.css 可能覆盖了你的设置，以 Computed 为准
真正麻烦的从来不是加一行 * { box-sizing: border-box; }，而是那些已经用了多年 content-box 逻辑的老项目——比如浮动导航栏、绝对定位弹窗、Canvas 容器，它们可能依赖 padding 向外扩展的行为。这种时候，别硬套全局重置，先用选择器精准控制更稳妥。
