html的文档流有哪些?html文档流简介

本篇文章给大家带来的内容是关于html的文档流是啥?html文档流简介，有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

一、文档流简介

1、什么是“正常文档流”？

在学习浮动规划此前，我们先来认识一下什么叫“正常文档流”？深入理解正常文档流，对后续的浮动规划和定位规划是非常重要的一个前提，但愿读者必然不要错过这一节的学习。

什么叫文档流？简便来说，就是元素在页面显现的前后次序。

那什么叫“正常文档流”呢？我们先来看一下正常文档流的简便定义：正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地顺次摆列元素。

上面的HTML代码的文档流如下：

<div><div>
<span></span><span><span>
<p></p>
<span></span><i><i><img/>
<hr/>

说明：

由于div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此假如两个行内元素相邻，就会会位于统一行，并且从左到右摆列。

2、什么叫“离开正常文档流”？

离开文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去操纵的HTML文档构造，你写的界面的次序就是网页展现的次序。比方写了5个div元素。正常文档流就是依照顺次显示这5个div元素。由于div元素是块元素，因此每个div元素独占一行：

HTML代码：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

上图就是依照正常文档流显示的结果图。

然后，所谓的离开文档流就是指它所显示的位置和文档代码的次序不一致了，比方可以用CSS操纵，把最后一个div元素显示在第一个div元素的位置，如下图：

在上图中，在不改动HTML代码次序的前提下，我们可以通过CSS来将id="div5"的div元素从正常文档流“抽”出来，然后显示在其他div元素此前。在这种状况下，id="div5"的div元素就已经“离开正常文档流”了。

在CSS规划中，我们可以使用浮动或者定位这两种技术来实现“离开正常文档流”，从而为所欲为地操纵着页面的规划。

以上就是对html的文档流是啥?html文档流简介的全部介绍，假如您想理解更多有关Html5教程，请关注PHP中文网。

以上就是html的文档流是啥?html文档流简介的具体内容，更多请关注百分百源码网其它相关文章！