文档流

文档流是 CSS 中最基础的布局方式，也是所有元素的默认布局方式。理解文档流对于掌握 CSS 布局至关重要。

什么是文档流

文档流是指元素按照其在 HTML 中出现的顺序，从上到下、从左到右自然排列的方式。在文档流中，块级元素独占一行，行内元素在同一行内排列。

块级元素在文档流中的表现

基本特性

块级元素在文档流中独占一行，宽度默认为父元素的 100%，可以设置宽度和高度。

/* 块级元素 */
.block {
  display: block;
  width: 100%;
  height: 100px;
  background: #3498db;
}

块级元素的排列方式

块级元素按照在 HTML 中出现的顺序，从上到下垂直排列。

<div class="block1">块级元素 1</div>
<div class="block2">块级元素 2</div>
<div class="block3">块级元素 3</div>

.block1 {
  background: #3498db;
  height: 100px;
}

.block2 {
  background: #e74c3c;
  height: 100px;
}

.block3 {
  background: #2ecc71;
  height: 100px;
}

常见的块级元素

• <div>
• <p>
• <h1> 到 <h6>
• <ul> 和 <ol>
• <li>
• <table>
• <form>
• <header>
• <footer>
• <section>
• <article>

行内元素在文档流中的表现

基本特性

行内元素在文档流中不独占一行，宽度由内容决定，不能设置宽度和高度。

/* 行内元素 */
.inline {
  display: inline;
  background: #e74c3c;
  color: white;
}

行内元素的排列方式

行内元素按照在 HTML 中出现的顺序，在同一行内从左到右排列。如果一行放不下，会自动换行。

<span class="inline1">行内元素 1</span>
<span class="inline2">行内元素 2</span>
<span class="inline3">行内元素 3</span>

.inline1 {
  background: #3498db;
  color: white;
}

.inline2 {
  background: #e74c3c;
  color: white;
}

.inline3 {
  background: #2ecc71;
  color: white;
}

常见的行内元素

• <span>
• <a>
• <strong>
• <em>
• <img>
• <input>
• <button>
• <label>
• <select>
• <textarea>

行内块元素在文档流中的表现

基本特性

行内块元素既有块级元素的特性，又有行内元素的特性。它们不独占一行，但可以设置宽度和高度。

/* 行内块元素 */
.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #2ecc71;
  margin: 10px;
}

行内块元素的排列方式

行内块元素在同一行内排列，但可以设置宽度和高度。

<div class="inline-block1">行内块元素 1</div>
<div class="inline-block2">行内块元素 2</div>
<div class="inline-block3">行内块元素 3</div>

.inline-block1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 10px;
}

.inline-block2 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #e74c3c;
  margin: 10px;
}

.inline-block3 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #2ecc71;
  margin: 10px;
}

改变元素的文档流行为

使用 display 属性

/* 将块级元素改为行内元素 */
.block-to-inline {
  display: inline;
}

/* 将行内元素改为块级元素 */
.inline-to-block {
  display: block;
}

/* 将元素改为行内块元素 */
.to-inline-block {
  display: inline-block;
}

使用 float 属性

/* 使用浮动改变文档流 */
.float-left {
  float: left;
  width: 200px;
  height: 100px;
  background: #3498db;
}

.float-right {
  float: right;
  width: 200px;
  height: 100px;
  background: #e74c3c;
}

使用 position 属性

/* 使用定位改变文档流 */
.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #2ecc71;
}

文档流的实际应用

页面结构

<header class="header">头部</header>
<nav class="nav">导航</nav>
<main class="main">主内容</main>
<aside class="sidebar">侧边栏</aside>
<footer class="footer">底部</footer>

/* 页面结构 */
.header {
  display: block;
  width: 100%;
  height: 60px;
  background: #333;
}

.nav {
  display: block;
  width: 100%;
  height: 40px;
  background: #555;
}

.main {
  display: block;
  width: 70%;
  min-height: 400px;
  background: #f5f5f5;
  float: left;
}

.sidebar {
  display: block;
  width: 30%;
  min-height: 400px;
  background: #e9ecef;
  float: right;
}

.footer {
  display: block;
  width: 100%;
  height: 40px;
  background: #2c3e50;
  clear: both;
}

文本内容

<p>
  这是一段<span class="highlight">重要的</span>文本内容。
  行内元素可以在<span class="emphasis">同一行</span>内排列。
</p>

/* 文本内容 */
p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.highlight {
  background: #fff3cd;
  padding: 2px 5px;
}

.emphasis {
  font-weight: bold;
  color: #007bff;
}

按钮组

<div class="button-group">
  <button class="button">按钮 1</button>
  <button class="button">按钮 2</button>
  <button class="button">按钮 3</button>
</div>

/* 按钮组 */
.button-group {
  font-size: 0; /* 消除空白字符 */
}

.button {
  display: inline-block;
  font-size: 16px;
  padding: 10px 20px;
  margin-right: 5px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:last-child {
  margin-right: 0;
}

文档流的最佳实践

1. 使用语义化的 HTML

<!-- 推荐 - 使用语义化的 HTML -->
<header class="header">头部</header>
<nav class="nav">导航</nav>
<main class="main">主内容</main>
<footer class="footer">底部</footer>

<!-- 不推荐 - 全部使用 div -->
<div class="header">头部</div>
<div class="nav">导航</div>
<div class="main">主内容</div>
<div class="footer">底部</div>

2. 合理使用块级元素和行内元素

/* 推荐 - 合理使用块级元素和行内元素 */
.container {
  display: block;
}

.icon {
  display: inline-block;
}

/* 不推荐 - 滥用 display 属性 */
.block {
  display: inline-block; /* 应该使用 block */
}

3. 注意空白字符的影响

/* 问题 - 行内块元素之间的空白字符 */
.container {
  font-size: 0; /* 解决方法 1 */
}

.element {
  display: inline-block;
  font-size: 16px;
}

/* 解决方法 2 - 使用浮动 */
.element {
  float: left;
}

总结

文档流是 CSS 中最基础的布局方式：

1. 文档流：元素按照 HTML 顺序自然排列
2. 块级元素：独占一行，可以设置宽度和高度
3. 行内元素：不独占一行，宽度由内容决定
4. 行内块元素：不独占一行，可以设置宽度和高度
5. 改变文档流：使用 display、float、position 属性
6. 实际应用：页面结构、文本内容、按钮组

记住以下几点：

• 理解文档流的基本概念和重要性
• 掌握块级元素和行内元素的区别
• 学会使用 display 属性改变元素的文档流行为
• 注意空白字符对行内块元素的影响
• 使用语义化的 HTML 创建文档流结构