html的文檔流是什么?html文檔流簡(jiǎn)介

一、文檔流簡(jiǎn)介

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

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

什么叫文檔流？簡(jiǎn)單來(lái)說(shuō)，就是元素在頁(yè)面出現(xiàn)的先后順序。

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

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

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

說(shuō)明：

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

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

脫離文檔流是相對(duì)正常文檔流而言的。正常文檔流就是我們沒(méi)有用CSS樣式去控制的HTML文檔結(jié)構(gòu)，你寫(xiě)的界面的順序就是網(wǎng)頁(yè)展示的順序。比如寫(xiě)了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代碼順序的前提下，我們可以通過(guò)CSS來(lái)將id="div5"的div元素從正常文檔流“抽”出來(lái)，然后顯示在其他div元素之前。在這種情況下，id="div5"的div元素就已經(jīng)“脫離正常文檔流”了。

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

以上就是對(duì)html的文檔流是什么?html文檔流簡(jiǎn)介的全部介紹，如果您想了解更多有關(guān)Html5教程，請(qǐng)關(guān)注PHP中文網(wǎng)。

以上就是html的文檔流是什么?html文檔流簡(jiǎn)介的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！