html中文檔流指的是什么

這篇文章給大家分享的是有關(guān)html中文檔流指的是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

一、文檔流簡介

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

在學(xué)習(xí)浮動(dòng)布局之前，我們先來認(rèn)識(shí)一下什么叫“正常文檔流”？深入了解正常文檔流，對后續(xù)的浮動(dòng)布局和定位布局是非常重要的一個(gè)前提，希望讀者一定不要錯(cuò)過這一節(jié)的學(xué)習(xí)。

什么叫文檔流？簡單來說，就是元素在頁面出現(xiàn)的先后順序。

那什么叫“正常文檔流”呢？我們先來看一下正常文檔流的簡單定義：正常文檔流，將窗體自上而下分成一行一行，塊元素獨(dú)占一行，相鄰行內(nèi)元素在每行中按從左到右地依次排列元素。

上面的HTML代碼的文檔流如下：

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

說明：

因?yàn)閐iv、p、hr都是塊元素，因此獨(dú)占一行。而span、i、img都是行內(nèi)元素，因此如果兩個(gè)行內(nèi)元素相鄰，就會(huì)會(huì)位于同一行，并且從左到右排列。

2、什么叫“脫離正常文檔流”？

脫離文檔流是相對正常文檔流而言的。正常文檔流就是我們沒有用CSS樣式去控制的HTML文檔結(jié)構(gòu)，你寫的界面的順序就是網(wǎng)頁展示的順序。比如寫了5個(gè)div元素。正常文檔流就是按照依次顯示這5個(gè)div元素。由于div元素是塊元素，因此每個(gè)div元素獨(dú)占一行：

HTML代碼：

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

上圖就是按照正常文檔流顯示的效果圖。

然后，所謂的脫離文檔流就是指它所顯示的位置和文檔代碼的順序不一致了，比如可以用CSS控制，把最后一個(gè)div元素顯示在第一個(gè)div元素的位置，如下圖：

在上圖中，在不改變HTML代碼順序的前提下，我們可以通過CSS來將id="div5"的div元素從正常文檔流“抽”出來，然后顯示在其他div元素之前。在這種情況下，id="div5"的div元素就已經(jīng)“脫離正常文檔流”了。

在CSS布局中，我們可以使用浮動(dòng)或者定位這兩種技術(shù)來實(shí)現(xiàn)“脫離正常文檔流”，從而隨心所欲地控制著頁面的布局。

感謝各位的閱讀！關(guān)于html中文檔流指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！