content-box下width/height仅指内容区，padding和border额外叠加使总宽增大；border-box下width/height包含content、padding和border，内容区自动收缩以保证总宽恒定。
content-box 和 border-box 的核心区别在于：width 和 height 这两个属性到底“管到哪一层”——是只管内容，还是连同内边距和边框一起管。
box-sizing: content-box 是怎么算宽高的？
这是浏览器默认行为，但容易让人误判实际占位尺寸。
-
width和height只约束内容区大小，padding和border会额外加在它外面 - 元素总宽度 =
width+ 左右padding+ 左右border - 比如
width: 200px; padding: 15px; border: 3px solid #000;→ 实际占宽 200 + 30 + 6 = 236px - 在 flex 容器里设
flex: 1的子项，如果用了content-box，又加了padding，可能直接撑破父容器
box-sizing: border-box 是怎么算宽高的？
它让 width 和 height 成为“最终占位尺寸”，更贴近视觉预期。
-
width就是元素盒子最外沿的宽度，padding和border都从这个宽度里扣 - 内容区宽度 =
width− 左右padding− 左右border - 同样
width: 200px; padding: 15px; border: 3px solid #000;→ 内容区自动变成 164px，整体仍占 200px - 响应式布局中改
padding不用同步调width，避免反复计算
全局设置 * { box-sizing: border-box } 有哪些坑？
虽然推荐，但不是无脑套用就能万事大吉。
- 伪元素（
::before、::after）不会被*匹配，必须显式加上*::before, *::after - 某些老版本 Safari 对
table元素的box-sizing渲染不一致，如果用表格做布局，得单独测试 - 第三方 UI 组件（比如旧版 Element UI 的某些弹窗）内部可能依赖
content-box行为，全局重置后会出现尺寸偏移 -
margin始终不参与盒模型尺寸计算，无论哪种模式，它都“在外面”，别指望它被border-box管住
真正难的不是记住公式，而是意识到：你在写 width: 300px 的那一刻，就已经在选择盒模型语义了——它到底是“我要一个 300px 宽的盒子”，还是“我要内容刚好 300px 宽”。后者几乎没人真需要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
