应优先使用 border-box：width/height 包含 padding 和 border，避免布局错位；默认 content-box 易导致实际尺寸超出预期。全局设置 * { box-sizing: border-box; } 最省事，兼容 ie8+。
box-sizing 的两个取值怎么选
默认是 content-box，但绝大多数现代布局中你该用 border-box。原因很简单：加了 padding 或 border 后，元素实际宽度会超出你写的 width 值，这在栅格、卡片、表单控件里极易导致错位或溢出。
使用 border-box 后，width 和 height 指的是“包含 padding 和 border 的总尺寸”，更符合直觉——你写 width: 200px，它就真占 200px 宽。
-
content-box：只对内容区生效，padding和border额外加在外部（默认行为） -
border-box：width/height包含padding+border，内容区自动收缩
全局设成 border-box 最省事
不用每个元素都写一遍，直接在 CSS 开头加这条规则就行：
* {
box-sizing: border-box;
}
注意：这个选择器会命中所有元素，包括 html、body、伪元素等。极少数场景下（比如需要精确控制 SVG 内部图形尺寸），可能得单独重置为 content-box，但日常开发几乎遇不到。
- 兼容性没问题：
box-sizing从 IE8+ 就支持 - 不要漏掉
::before和::after，它们也受*影响 - 如果用了第三方 UI 库（如 Ant Design），它的组件样式可能已设好
box-sizing，全局覆盖一般不会冲突
什么时候必须显式写 box-sizing
当你需要局部切换盒模型，或者复用某段旧代码时，显式声明比依赖全局更安全。常见于：
- 封装可复用的组件（比如一个带边框的按钮，对外暴露固定宽高）
- 对接遗留系统，原样式基于
content-box计算，临时兼容 - 调试时快速验证是否是盒模型导致的尺寸异常 —— 直接在 DevTools 里改
box-sizing值就能看到效果
示例：一个固定宽度的输入框，要确保无论加不加 padding 都不撑开容器：
.input-field {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
box-sizing: border-box; /* 必须写，否则实际宽 = 200 + 16 + 2 = 218px */
}
容易被忽略的坑：transition 和 box-sizing
如果你对某个元素同时设置了 box-sizing 切换 + transition（比如 hover 时改 box-sizing），浏览器无法平滑过渡——因为 box-sizing 是离散属性，没有中间状态。结果就是尺寸突变，还可能触发重排。
- 别在动画/过渡中切换
box-sizing，纯属自找麻烦 - 如果想实现类似“展开边框”的效果，改用
outline或transform: scale()更稳妥 - 检查 DevTools 的 Layout 标签页，能看到元素尺寸是否意外跳变，这是盒模型问题最直接的信号
真正麻烦的不是怎么设 box-sizing，而是忘了它会影响所有后续尺寸计算逻辑——尤其是和 max-width、flex-basis、calc() 混用时，括号里的数字含义会悄悄变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
