CSS——盒子模型

在我学习CSS视频的时候，发现所有的元素都是由一个个的盒子模型包围着的，它们是我们使用CSS实现准确布局，处理元素排列的关键，因此今天就来写篇博客总结下。

盒子模型分为两种——块级盒子模型（Block box）和 内联盒子模型（Inlinebox）
为什么要这么区分呢，是因为这两种盒子模型会在页面流和元素之间的关系上表现出不同的行为

块级盒子模型（Block box）

一个被定义成块级的（block）盒子会表现出以下行为:

1. 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
2. 每个盒子都会换行
3. width 和 height 属性可以发挥作用
4. 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题和段落默认情况下都是块级的盒子。

内联盒子模型（Inlinebox）

如果一个盒子对外显示为 inline，那么他会有以下行为

1. 盒子不会产生换行。
2. width 和 height 属性将不起作用。
3. 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
4. 水平方向的内边距、外边距以及边框会被应用而且也会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong>都是默认处于 inline 状态的。

我们弄清了两种不同的盒子模型之间的区别，那么盒子模型究竟是什么呢？

什么是盒子模型？

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。

一个块级盒子模型由以下几部分组成

1. Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
2. Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
3. Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
4. Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

<