html的文檔流是什麼?html文檔流簡介

這篇文章帶給大家的內容是關於html的文檔流是什麼?html文檔流簡介，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、文件流程簡介

1、什麼是「正常文件流程」？

在學習浮動佈局之前，我們先來認識什麼叫「正常文件流」？深入了解正常文件流，對後續的浮動佈局和定位佈局是非常重要的一個前提，希望讀者一定不要錯過這一節的學習。

什麼叫文檔流？簡單來說，就是元素在頁面出現的先後順序。

那什麼叫「正常文件流」呢？我們先來看看正常文檔流的簡單定義：正常文檔流，將窗體自上而下分成一行一行，塊元素獨佔一行，相鄰行內元素在每行中按從左到右地依次排列元素。

上面的HTML程式碼的文件流程如下：

<div><div>
<span></span><span><span>
<p></p>
<span></span><i><i><img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/806/931/846/1542014062250099.png?x-oss-process=image/resize,p_40"  class="lazy" / alt="html的文檔流是什麼?html文檔流簡介" >
<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文檔流簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！