这个问题非常经典 👍 也是前端面试高频题。结合你有多年前端经验（React / Vue），我们讲得稍微深入一点，而不是停留在概念层面。
一、CSS 盒模型（Box Model）是什么？
在 CSS 中，每一个元素都可以看成一个矩形盒子。
这个盒子由 4 个部分组成：
┌─────────────────────────┐
│ margin │ ← 外边距
│ ┌───────────────────┐ │
│ │ border │ │ ← 边框
│ │ ┌─────────────┐ │ │
│ │ │ padding │ │ │ ← 内边距
│ │ │ ┌────────┐ │ │ │
│ │ │ │ content│ │ │ │ ← 内容区域
│ │ │ └────────┘ │ │ │
│ │ └─────────────┘ │ │
│ └───────────────────┘ │
└─────────────────────────┘
盒模型结构从内到外：
content → padding → border → margin
二、标准盒模型（默认）
默认情况下，浏览器使用的是：
box-sizing: content-box;
📌 计算方式
div {
width: 200px;
padding: 20px;
border: 10px solid black;
}
实际宽度 =
200 (content)
+ 40 (左右padding)
+ 20 (左右border)
= 260px
⚠️ 注意：width 只算 content，不包含 padding 和 border。
三、IE 盒模型 / 现代推荐写法
box-sizing: border-box;
📌 计算方式
div {
width: 200px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}
实际宽度 = 200px
浏览器会自动计算：
content = 200 - padding - border
也就是说：
content = 200 - 40 - 20 = 140px
👉 width 包含 content + padding + border
四、box-sizing 有什么作用？
一句话总结：
决定 width / height 到底是计算 content 还是整个盒子
对比总结
| 属性 | content-box | border-box |
|---|---|---|
| 默认值 | ✅ 是 | ❌ 否 |
| width 是否包含 padding | ❌ 不包含 | ✅ 包含 |
| width 是否包含 border | ❌ 不包含 | ✅ 包含 |
| 布局是否容易计算 | ❌ 容易撑破 | ✅ 更稳定 |
五、为什么实际开发都用 border-box？
在你做后台管理系统（Ant Design 表格布局）或移动端页面时，如果用 content-box，很容易出现：
- 宽度 100%
- 再加 padding
- 结果元素超出父容器
举例：
.card {
width: 100%;
padding: 20px;
}
如果是 content-box：
👉 实际宽度 = 100% + 40px
直接撑爆父元素
而 border-box：
👉 永远不会超出 100%
六、实际项目最佳实践
几乎所有现代项目都会这样写：
* {
box-sizing: border-box;
}
或者更完整一点：
*, *::before, *::after {
box-sizing: border-box;
}
这样整个项目都统一用 border-box。
React / Vue / Ant Design 其实默认也都是这种思路。
七、面试加分点（进阶理解）
1️⃣ margin 不参与 width 计算
margin 是外部空间，不属于盒子本身。
2️⃣ padding 会影响背景色
背景色会覆盖：
content + padding
但不会覆盖 margin。
3️⃣ 行内元素的盒模型
- 行内元素不能设置 width / height
- padding、margin 水平方向有效
- 垂直方向表现特殊
