在本课中，我们将学习如何使用 CSS 的 display 属性将块级元素转换为行内元素，反之亦然。通过控制元素的显示方式，我们实际上是在控制文档流。

使用 CSS display 属性控制文档流

本章的第一个示例包含以下 HTML 代码：

1<h1 class="border1 display-inline">我们可以使用 CSS display 属性控制文档流</h1>
2<div class="border1 display-inline">这只是另一个 div。</div>
3<span class="border1 display-inline">这只是另一个 span。</span>
4<span class="border1 display-inline">又一个 span。</span>
5<div class="border1 display-inline">又一个 div。</div>
6<div class="border1 display-inline">这是本页的第三个 div！</div>

我们的 HTML 结构以两个块级元素开始：<h1> 和 <div> 标签。它们的默认行为是作为块级元素显示。换句话说，它们的 CSS display 属性由浏览器设置为 block 值。也就是说，现代浏览器遵循网络标准，将 <h1> 和 <div> 元素显示为块级元素。

然而，正如我们之前所见，我们可以使用 CSS（最好是通过 CSS 类）覆盖这种默认的浏览器行为。借助 CSS，我们可以将 display 属性从默认行为重置为其他值。

让我们看看在第一个示例中是如何实现的。

将块级元素与行内元素相互切换

以下是本示例的 CSS 代码：

1.border1 { border: 5px solid #FFD166 }
2.display-inline { display: inline }

即使我们知道为 CSS 类命名的含义，其他同事或阅读代码的人也可能难以理解其中的意图。因此，在这种情况下，display-inline 这个类名可能是最合适的。

这是在浏览器中应用该覆盖后的效果：

这就是我们的 CSS 代码全部内容。现在我们明白了 HTML 中发生了什么：我们覆盖了第一个示例中所有元素的默认 display 属性，将所有元素设置为 display: inline。

若要查看原始的、默认的、正常的文档流，只需在 CSS 中注释掉设置 display-inline 类的那行代码即可。更新后的代码如下：