概念说明

标准文档流（Normal Flow）是HTML元素的默认布局方式。元素分为块级元素和行内元素两种类型。

块级元素 (Block Elements)

块级元素独占一行，从新行开始显示，可以设置宽度、高度、内外边距。

特征	说明
独占一行	自动占满父元素的宽度，从新行开始
可以设置尺寸	支持 width、height、margin、padding
常见标签	div, h1-h6, p, ul, ol, li, section, article, header, footer

行内元素 (Inline Elements)

行内元素与其他行内元素在同一行显示，不能设置宽高。

特征	说明
不独占一行	与其他行内元素并排显示
不能设置尺寸	width、height 无效，margin上下无效
常见标签	span, a, strong, em, img, input, button

如何判断块级还是行内？

可以通过以下几种方式判断一个元素是块级还是行内：

判断方法	说明
1. 浏览器开发者工具	右键 → 检查 → 查看元素的 display 属性
2. 宽高是否生效	设置 width/height 有效 = 块级，无效 = 行内
3. 是否独占一行	自动换行 = 块级，并排显示 = 行内
4. margin/padding 上下	上下margin有效 = 块级，无效 = 行内
5. CSS display 属性	display: block/flex/grid = 块级，display: inline = 行内

常见HTML标签的display属性

不同HTML标签有不同的默认display属性值：

display: block	display: inline	display: inline-block
div, h1-h6, p	span, a, strong	img, input, button
ul, ol, li	em, i, b	select, textarea
section, article	small, del	video, audio
header, footer	br, img	-
nav, aside	input, label	-
form, table	canvas	-

实战：快速判断任意元素

步骤1： 在浏览器中打开任意页面

步骤2： 右键点击目标元素 → 选择"检查"

步骤3： 在右侧Styles面板找到"display"属性

步骤4： 根据display值判断元素类型

💡 提示：display 可以转换

块级元素可以变成行内：display: inline;

行内元素可以变成块级：display: block;

行内元素可以变成行内块：display: inline-block; （兼具两者优点）

示意图 - 块级 vs 行内

块级元素 (display: block)

我是 div，占据整行

我是另一个 div，换行显示

我还是 div，继续换行

行内元素 (display: inline)

span1

span2

span3

↑ 并排显示，不会换行 ↑

应用场景

适用：简单的文本页面、博客文章、新闻列表等线性内容展示

示意图

块级元素1

块级元素2

块级元素3

↑ 块级元素垂直排列 ↓

实际例子 - 博客文章布局

我的第一篇博客

2024年1月15日 · 前端开发

这是文章的第一段内容，标准文档流会自动让段落垂直排列。

这是文章的第二段内容，可以看到每个p标签独占一行。

这是引用内容，同样是块级元素

这是最后一段内容，总结全文。

                        <article>
    <h1>我的第一篇博客</h1>
    <p>这是第一段...</p>
    <p>这是第二段...</p>
    <blockquote>引用内容</blockquote>
</article>
                    

标准文档流布局