Glittering's blog

Appearance

盒子模型 ​

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

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

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

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

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

举例说明： ​

css
div {
  width: 200px;
  padding: 10px;
  border: 5px solid;
}
模型实际渲染宽度
content-box200 + 10 + 10 + 5 + 5 = 230px
border-box200（已包含 padding、border）

三、box-sizing 属性详解 ​

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

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

来源：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

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

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

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

优点： ​

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

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

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

html
<div class="box1">content-box</div>
css
.box1 {
  width: 200px;
  padding: 20px;
  border: 10px solid #4f46e5;
  background: #c7d2fe;
}

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

2️⃣ border-box ​

html
<div class="box2">border-box</div>
css
.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. 如果只想让部分组件使用标准模型？ ​

👉 局部覆盖：

css
.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 练习） ​

vue
<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>

Copyright © 2026