一、文档流的概念
网页文档流（Document Flow）是指网页中元素（如文本、图片、链接等）按照特定的顺序在浏览器中渲染和显示的过程。文档流的概念是为了保证网页的结构和布局能够正确地呈现给用户。
文档流的特点：
- 从上至下的顺序：元素按照其在HTML文档中的出现顺序依次排列。
- 自然流动：每个元素占用一行或一部分行，宽度会自动调整以适应父容器。
- 元素的位置：元素的位置会受到前面元素的影响，会受盒模型（margin、border、padding）的属性影响。
演示代码：
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: gray;
border: 2px red solid;
}
</style>
</head>
<body>
<!-- 块元素文档流 -->
<div></div>
<div></div>
<div></div>
<div></div>
<!-- 行内元素文档流 -->
<b>加粗文本</b>
<b>加粗文本</b>
<b>加粗文本</b>
<b>加粗文本</b>
</body>演示结果：
以上展示出来的就是网页的文档流，顾名思义就是按顺序逐一排列
二、文档流的缺陷
- 难以实现复杂布局：文档流主要是为了简化布局，因此在实现复杂的布局时会变得非常困难。
- 元素的位置受限：元素的位置会受到前面元素的影响，如果需要调整某个元素的位置，可能需要改变其他元素的位置。
- 对响应式布局的挑战：在不同设备上，网页布局需要做出相应的调整，而文档流往往无法满足这种需求。
- 元素的堆叠问题：文档流无法实现元素的层叠效果，如果需要实现多层次的布局，可能需要使用其他技术，如定位或弹性布局。
示例一：
布局死板不灵活， 元素高低不平以底边对齐。在大小不一的元素排版中会显得特别难看
示例二：
代码：
<b>加粗 文本</b><br>
<b>加粗文本</b>
HTML中的连续空格会被浏览器解析为一个空格，不论是在标记间的空格还是标记内的空格。如果需要在HTML中显示多个连续空格的效果，可以使用HTML实体字符
来代替空格
示例三：
是由于文档流的缺陷所导致的元素间间隙过小的现象。然而，由于一些因素，可能会导致元素之间的间隙变得非常小，甚至没有间隙。
综上所述，虽然文档流是最基本和常用的布局方式，但在实现复杂布局和响应式设计时存在一些缺陷，需要使用其他技术（盒子的相对定位和绝对定位）来弥补。请移步到下一期blog：盒子的相对定位和绝对定位
扫一扫
4574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
