文档流的概念：
CSS 的文档流是指文档中元素按照其在 HTML 中出现的顺序自上而下布局的方式，也称为常规流或默认流。文档流定义了元素的布局顺序和定位方式，包括元素的位置、大小、间距等属性。
在文档流中，每个元素都会占据一定的空间并尽可能充满其包含块的宽度。每个元素的位置都会受到前面元素的影响，如果前面的元素发生位置变化，那么后面的元素的位置也会发生相应的变化。
文档流是 CSS 中最基本、最重要的概念之一，它决定了网页的整体布局和排版方式，也是实现网页布局的基础。
文档流中的元素按照下面的规则排列：
块级元素：块级元素会独占一行，并在前面自动添加一个垂直间距
| <div> | 常用于元素的分组（便于布局控制及样式设置） |
| <p> | 用于文本段落 |
| <h1~6> | 用于创建标题，数字越小，级别越高 |
| <section> | 表示文档中的一个区域或部分，有语义化的作用 |
| <article> | 表示文档中的独立内容，通常是文章或新闻等 |
| <header> | 用于定义文档或区域的页眉，通常包含标题和导航 |
| <footer> | 用于定义文档或区域的页脚，通常包含版权信息等 |
| <nav> | 用于包含导航链接，通常位于页眉或页脚中 |
| <aside> | 用于定义侧边栏内容，通常与主要内容分开显示 |
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: gray;
border: 2px red solid;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
运行结果：
行内元素：行内元素会在一行中排列，并且宽度根据内容自适应
| <a> | 创建超链接，用于导航到其他页面或资源 |
| <span> | 常用于对内联元素进行分组（便于通过 CSS 设置样式）或用于放置文本 |
| <img> | 用于插入图像 |
| <br> | 起换行作用 |
| <sub> | 用于标记需要作为下标的文本，通常用于化学式和数学公式 |
| <sup> | 用于标记需要作为上标的文本，通常用于指数和脚注 |
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 100px;
height: 100px;
background-color: gray;
border: 2px red solid;
}
</style>
</head>
<body>
<img src="./风景.jpg" alt="">
<img src="./风景.jpg" alt="">
<img src="./风景.jpg" alt="">
</body>
</html>
运行结果：
（行内块级元素：行内块级元素与行内元素类似，但是它可以设置宽度、高度等块级元素的属性如： <input> 、 <button> 、 <textarea> 等）
文档流的缺陷：
| 高矮不齐，底边对齐 |
| 空白折叠现象 |
| 无论多少个空格、换行、tab，都会折叠为一个空格 |
| 如果我们想让img标签之间没有空隙，必须紧密连接 |
| 元素无空隙 |
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>风景图</span>
<img src="./风景.jpg" alt="" width="200px" height="200px">
<p>有多个空格折叠，只显示一个：</p >
<p>风景真 好看 嗯</p >
<p>元素之间有空隙</p >
<img src="./风景.jpg" alt="" width="200px" height="200px">
<img src="./风景.jpg" alt="" width="200px" height="200px">
</body>
</html>
运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
