CSS 系列 - 1. 盒模型

标准模型+IE 模型

盒模型又称框模型，包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)四个要素。具体排布如下图所示。

盒模型分为两种

标准模型
IE 模型

两种盒模型区别

两种模型的内容宽高计算方式不同

IE 模型元素宽度 width = content + padding + border，高度类似宽度计算。

标准模型元素宽度 width = content，高度类似宽度计算。

两种模型的宽和高

通过 css3 新增的属性 box-sizing 可以设置盒模型类型。在不设置 box-sizing 的情况下，默认为 content-box。

标准模型 - content-box

.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  border: 5px solid #1890ff;
  padding: 10px;
  margin: 15px;
}

content-box设置为标准模型，从图上看，我们就可以知道，我们设置的 width 属性，指的是 content 的宽度。所以我们来计算元素宽度： content-width + 2 * border + 2 * padding = 130px。

IE 模型 - border-box

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 5px solid #1890ff;
  padding: 10px;
  margin: 15px;
}

.border-box 设置为 IE 模型，从上图看，我们就可以知道，它的元素宽度为 content-width + 2 * padding + 2 * border = 70px + 2 * 10px + 2 * 5px = 100px。所以元素的宽度就是我们设置的 width: 100px;。而内容的宽度则是 width - 2 * padding - 2 * border = 70px。

外边距(margin)重叠

在使用中，在垂直方向上，有两个外边距重叠时，会合并成一个外边距，高度等于两者中的较大者。

需要注意的是，只有在普通文档流中，才会发生合并。行内框、浮动框或绝对定位之间的外边距并不会发生合并。

合并之前，是 30px，合并之后以大的值保留，剩下20。

我们来举个例子。

.box {
  width: 100px;
  height: 100px;
}
.first {
  margin-bottom: 100px;
  background-color: orange;
}
.second {
  margin-top: 50px;
  background-color: wheat;
}

<div class="box first"></div>
<div class="box second"></div>

为了效果明显，我们在这里添加了 1.5 个格子的高度，来看看效果，我们就发现了，其实只保留了一个格子的高度。所以验证了外边距合并。

而为什么会这样呢，其实在这里就是创建了一个《CSS 系列之 BFC 容器》，可以在这边文章中去了解 BFC。

盒模型，在面试中容易遇到，是比较简单但是很重要的知识点。

hzzzzzzzq / Blog