盒子模型

一、什么是盒子模型（Box Model）

浏览器渲染一个元素时，会将其视为一个矩形盒子（Box）。 这个盒子由四个区域组成：

+----------------------------+
|        margin 外边距       |
|  +----------------------+  |
|  |     border 边框      |  |
|  |  +----------------+  |  |
|  |  |  padding 内边距 |  |  |
|  |  | +-------------+ |  |  |
|  |  | | content 内容 | |  |  |
|  |  | +-------------+ |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+----------------------------+

---

二、两种盒模型的区别（核心）

模型类型	计算方式（width 表示什么）	CSS 触发方式
标准盒模型（W3C）	width = content 区域宽度，不包括 padding 和 border	box-sizing: content-box（默认）
IE 盒模型	width = content + padding + border 整体盒宽	box-sizing: border-box

举例说明：

div {
  width: 200px;
  padding: 10px;
  border: 5px solid;
}

模型	实际渲染宽度
content-box	200 + 10 + 10 + 5 + 5 = 230px
border-box	200（已包含 padding、border）

---

三、box-sizing 属性详解

属性值	含义
content-box	width 只包含内容区（默认）
border-box	width 包含内容 + padding + border（推荐）
inherit	继承父元素设置

---

在 CSS盒子模型 (opens new window) 的默认定义里，你对一个元素所设置的 width (opens new window) 与 height (opens new window) 只会应用到这个元素的内容区。如果这个元素有任何的 border (opens new window) 或 padding (opens new window) ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。

来源：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing (opens new window)

四、实战推荐写法（几乎所有项目都这么写）

现代前端项目（Vue/React/Tailwind）都会全局设定：

*, *::before, *::after {
  box-sizing: border-box;
}

优点：

• padding、border 不再影响盒子总宽度；
• 布局更直观，减少计算；
• 尤其适合响应式和复杂 UI（如卡片、表单）；

---

五、举例对比（感性理解）

1️⃣ 默认情况（content-box）

<div class="box1">content-box</div>

.box1 {
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #c7d2fe;
}

👉 实际占用宽度 = 200 + 40 + 20 = 260px

---

2️⃣ border-box

<div class="box2">border-box</div>

.box2 {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #a5b4fc;
}

👉 实际占用宽度 = 200px，更好控制！

---

六、与布局相关的几个小陷阱

场景	问题
设置 width: 100% 同时有 padding	实际宽度 > 父级，会溢出（content-box）
想让盒子固定尺寸	用 border-box 更安全
Tailwind / ElementPlus 默认	已设置全局 border-box

---

七、面试官可能的追问

❓1. 如何验证盒模型？

👉 打开浏览器 DevTools → Elements → “Computed” 面板 → Box Model 图示，一目了然。

❓2. 为什么 CSS Reset 要加 *, *::before, *::after { box-sizing: border-box; }？

👉 因为伪元素 (::before、::after) 默认是 content-box，不重置会影响布局。

❓3. 如果只想让部分组件使用标准模型？

👉 局部覆盖：

.card {
  box-sizing: content-box;
}

---

八、面试答题模板（30秒）

在 CSS 中，每个元素都是一个盒子，分为 content、padding、border、margin 四层。 默认的盒模型是标准模型（content-box），width 只包含内容区； 而 IE 模型（border-box）会把 padding 和 border 都包含在 width 里。 我们可以通过 box-sizing 属性控制，一般项目都会统一设置为 border-box， 这样布局更可控，尤其在响应式场景中可以避免计算宽度出错。

---

九、可视化案例（推荐自己做个 Demo 练习）

<template>
  <div class="container">
    <div class="box content-box">content-box</div>
    <div class="box border-box">border-box</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  gap: 20px;
}
.box {
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #c7d2fe;
  text-align: center;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
  background: #a5b4fc;
}
</style>

---