默认box-sizing为content-box时，width仅指内容区宽度，padding和border额外增加总宽；改用border-box后，width包含padding和border，内容区自动压缩以保持总宽不变。
因为默认盒模型（box-sizing: content-box）下，padding 是加在你写的 width 外面的，不是从里面扣的。
为什么 padding 会让元素“变宽”？
你写 width: 200px; padding: 15px;，浏览器实际渲染总宽度是 200px + 15px + 15px = 230px。这不是 bug，是 CSS 规范定义的行为——width 只管内容区，padding 和 border 都额外算。
常见翻车场景：
- 父容器
width: 100%，子元素width: 100%; padding: 10px;→ 实际超宽，横向滚动或换行 - Flex 子项设了
width: 200px，又加padding→ 占用空间变大，挤压其他项目 - 响应式断点里用
calc(50% - 16px)对齐，结果padding又额外加了空间，错位
box-sizing: border-box 是怎么“压住” padding 的？
它把 width 的含义从“内容宽”改成“边框盒总宽”。你写 width: 200px; padding: 15px;，内容区自动缩成 170px，整个元素仍严格占满 200px。
关键点：
-
margin始终不参与盒模型计算，两种模式下行为一致 -
min-width和max-width同样走border-box规则，别只改width忘了它们 -
box-sizing可继承，但对inline元素无效，只对块级和替换元素（如input、img）生效
全局声明 box-sizing: border-box 容易踩哪些坑？
通配符写法最常用：* { box-sizing: border-box; }，但它不是万能的：
- 第三方 UI 库（比如旧版 Element UI）可能显式设了
box-sizing: content-box，覆盖你的全局规则 -
input、textarea在 iOS 12 或更早 Safari 中会回退为content-box，得单独加固：input, textarea, button { box-sizing: border-box; } - Flex 子项默认
min-width: auto，哪怕用了border-box，长文本或图片照样顶破容器，必须加min-width: 0 -
width: auto或width: fit-content时，box-sizing不起作用——它只约束你显式写的width/height
怎么确认 box-sizing: border-box 真生效了？
不能光看代码写了没，得进开发者工具实测：
- 选中目标元素，在 “Computed” 面板查
box-sizing值是否为border-box - 切到 “Metrics” 面板，悬停在蓝色宽度条上，手动增减
padding值，观察总宽度是否稳定不变 - 如果总宽随
padding变化而浮动，说明要么被更高优先级规则覆盖，要么该元素处于flex-basis: auto状态
真正麻烦的从来不是 padding 本身，而是它和 margin、flex、display 类型混在一起时，人脑没记住浏览器到底按哪条规则算的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
