★ ★ ★ ★ ★

说一下 CSS 盒子模型，以及标准情况和 IE 下的区别？

⚡ 速记答案（30 秒）

标准盒模型：width 只是内容宽度，总宽度 = margin + border + padding + width。IE 传统盒模型：width 包含 padding + border。用 box-sizing: border-box 可切换到 IE 模式，实战中一般全局设置 * { box-sizing: border-box; }。

📖 详细讲解

标准面试回答（推荐记住）

CSS 盒模型包括 content、padding、border、margin 四个部分。标准盒模型中，width 和 height 只指内容区域的尺寸，总宽度要加上 padding 和 border。IE 传统盒模型中，width 包含了 padding 和 border，计算更直观。通过 box-sizing 属性可以切换：content-box 是标准盒模型，border-box 是 IE 盒模型。实战中通常全局设置 border-box，这样设置宽度就是最终宽度，不用再减去 padding 和 border。

盒模型示意

┌─────────────────────────────────┐
│             margin              │
│  ┌───────────────────────────┐  │
│  │          border           │  │
│  │  ┌─────────────────────┐  │  │
│  │  │       padding       │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │    content    │  │  │  │
│  │  │  │  width×height │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

两种盒模型对比

模型	box-sizing 值	width 包含
标准	content-box	仅 content
IE	border-box	content + padding + border

✅ 面试要点

•理解四个层次：content → padding → border → margin
•知道 box-sizing 切换盒模型
•实战推荐全局 border-box

💻 代码示例

盒模型对比演示

<style>
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #3b82f6;
  margin: 10px;
  background: #1e3a5f;
}

.content-box { box-sizing: content-box; }
/* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */

.border-box { box-sizing: border-box; }
/* 实际占用宽度 = 200px（padding 和 border 内含）*/
</style>

<div class="box content-box">content-box: 250px</div>
<div class="box border-box">border-box: 200px</div>

🎨 效果预览