content-box 与 border-box：一个简单的理解方式
想像你在装一个礼物盒。盒子有三层：
- 内容（content） → 礼物本体
- padding（内边距） → 礼物周围的缓冲泡棉
- border（边框） → 盒子的硬外壳
- margin（外边距） → 盒子摆在桌上，与其他盒子的距离
box-sizing 的作用，就是告诉“系统”：
你写的 width 指的是礼物本体的大小？还是整个盒子的大小？
这就是两种盒模型的本质区别。
一、content-box：你写的 width 只代表“礼物本体”大小
content-box = 我告诉你礼物大小，盒子你自己去算。
默认情况下：
box-sizing: content-box;
当你写：
width: 100px
浏览器理解为：
里面的“内容区（content）”宽度是 100px，
至于泡棉（padding）和盒子硬壳（border）有多厚？那会额外加上去！
通俗理解：
你告诉商家：
“我的礼物是 100px 宽。”
商家会另外加泡棉和盒子，所以最终的盒子一定比 100px 大。
举例：
width: 100px;
padding: 20px;
border: 5px;
实际盒子宽度＝
100（礼物本体）
- 20×2（左右泡棉）
- 5×2（左右硬壳）
= 150px
content-box 的特点：
- 内容大小固定（你保证礼物本体大小不变）
- 盒子会被 padding 和 border 撑大
- 适合：阅读区、文章内容、滚动区域（内容优先）
二、border-box：你写的 width 就是整个“最终盒子”的宽度
border-box = 我告诉你盒子大小，你自己去安排礼物和泡棉。
设置：
box-sizing: border-box;
width: 100px
浏览器理解为：
整个盒子（内容 + padding + border）就是 100px。
要放 padding，要加 border，那内容区就缩小。
通俗来说：
你告诉商家：
“我的整个礼物盒最终必须 100px 宽，不能多一毫米。”
商家会根据需要在内部调整泡棉和礼物的空间，
但外部尺寸永远不会改变。
举例：
width: 100px;
padding: 20px;
border: 5px;
最终宽度仍然是：
就是 100px，不会变。
浏览器内部会计算：
内容区宽度 = 100 - (20×2 + 5×2) = 50px
border-box 的特点：
- 盒子外部尺寸不变（width 就是最终结果）
- padding 和 border 不会把盒子撑大
- 适合：组件、按钮、布局系统、响应式设计
一句话总结：
border-box 是把 width 理解为“最终盒子的尺寸”。
三、一句话对比
content-box：只有内容本体大小
border-box：整个盒子的总宽度
四、为什么现代前端强烈推荐 border-box？
因为布局最怕“被撑大”。
border-box 则保证：
你写多少，就是多少。永远不变。
所以几乎所有 UI 框架（Bootstrap、Tailwind、Element、AntD 等）
都全站使用：
* {
box-sizing: border-box;
}
