CSS盒模型是什么？box-sizing有什么作用？

一、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 水平方向有效
垂直方向表现特殊