站長(zhǎng)資訊網(wǎng)
html5中，文檔流又稱“普通流”，指的是元素排版布局過(guò)程中，元素會(huì)默認(rèn)自動(dòng)從左往右，從上往下的流式排列方式；并且最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。脫離文檔流的方法：1、float浮動(dòng)；2、position定位。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、DELL G3電腦
一、什么是文檔流？
“流”，我們?cè)谏钪薪?jīng)常聽(tīng)到這個(gè)詞，比如水流，電流。就像水流從高處往低處流一樣，我們可以把文檔流想象成html元素在瀏覽器上“流動(dòng)”。瀏覽器的頂端就是河流的源頭，瀏覽器的底部就是河流的盡頭。
那么所謂的文檔流（normal flow，也被稱為“普通流”），指的是就是元素排版布局過(guò)程中，元素會(huì)自動(dòng)從左往右，從上往下地遵守這種流式排列方式。
當(dāng)瀏覽器渲染html文檔時(shí)，從頂部開(kāi)始開(kāi)始渲染，為元素分配所需要的空間，每一個(gè)塊級(jí)元素單獨(dú)占一行，行內(nèi)元素則按照順序被水平渲染直到在當(dāng)前行遇到了邊界，然后換到下一行的起點(diǎn)繼續(xù)渲染。那么此時(shí)就不得不說(shuō)一下塊級(jí)元素和行內(nèi)元素。
二、塊級(jí)元素與行內(nèi)元素
塊級(jí)元素：顧名思義，這個(gè)元素是“一塊”，那么作為一個(gè)塊，它就應(yīng)該有自己的寬度和高度。而且它比較霸道，每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無(wú)法一般無(wú)法添加其他元素（float浮動(dòng)后除外），一般作為容器使用，常見(jiàn)的塊級(jí)元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。
結(jié)合以上內(nèi)容，塊級(jí)元素?fù)碛幸韵绿攸c(diǎn)：
-
每個(gè)塊級(jí)元素都是獨(dú)自占一行。
-
元素的高度、寬度、行高和邊距都是可以設(shè)置的?！ ?
-
元素的寬度如果不設(shè)置的話，默認(rèn)為父元素的寬度。
行內(nèi)元素：顯然，這種元素存在于一行內(nèi)，且能與別的行內(nèi)元素共同享有一行。常見(jiàn)的行內(nèi)元素有：span、input、a、em、strong、b、br、img、select、button等。
那么行內(nèi)元素?fù)碛械奶攸c(diǎn)如下：
-
每一個(gè)行內(nèi)元素可以和別的行內(nèi)元素共享一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下了，才會(huì)換行。
-
行內(nèi)元素設(shè)置width, height無(wú)效（此處有坑，請(qǐng)往下看），寬度隨元素的內(nèi)容而變化。
-
行內(nèi)水平方向的padding-left和padding-right都會(huì)產(chǎn)生邊距效果，但是豎直方向上的padding-top和padding-bottom都不會(huì)產(chǎn)生邊距效果。
三、替換元素和非替換元素
細(xì)心的大家肯定發(fā)現(xiàn)了，像<img>、<input>、<select>、<textarea>等，它們也是行內(nèi)元素呀，明明就可以設(shè)置寬高啊，那這里就有問(wèn)題了。其實(shí)并不是所有的行內(nèi)元素都不能設(shè)置寬高的。
行內(nèi)元素也分為兩種：替換元素和非替換元素。
替換元素：
瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定其的具體顯示內(nèi)容的元素，常見(jiàn)的有：<img>、<input>、<select>、<textarea>、<object>。比如瀏覽器根據(jù)<img >標(biāo)簽的src屬性顯示圖片。根據(jù)<input>的type屬性決定顯示輸入框還是按鈕，它們的寬度和高度是可以設(shè)置的。
非替換元素：
內(nèi)容直接表現(xiàn)給用戶端的元素稱為成為非替換元素，常見(jiàn)的有：<span>、<p>、<label>等。例如<span>，它會(huì)將開(kāi)始和結(jié)束標(biāo)簽中的內(nèi)容直接在瀏覽器上展示出來(lái)。
四、脫離文檔流
所謂脫離文檔流，即將元素從普通的布局排版（普通文檔流）中脫離出來(lái)，其他盒子在定位的時(shí)候，會(huì)當(dāng)做沒(méi)看到它（余生你不必再指教了），兩者位置重疊都是可以的，但是依然在DOM樹(shù)中存在。
那么會(huì)使元素脫離文檔流的情況有哪些呢？
1、float產(chǎn)生的浮動(dòng)
使用float脫離文檔流時(shí)，雖然其他盒子會(huì)無(wú)視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在該元素的周圍。
下面是代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo1{ width: 200px; height: 200px; border: 5px solid red; float: left; } .demo2{ width: 200px; height: 100px; border: 5px solid green; } </style> </head> <body> <div>這是demo1的文本</div> <div>這是demo2的文本</div> </body> </html>
代碼運(yùn)行效果：
2、position:absolute;
absolute是絕對(duì)定位，絕對(duì)定位的元素以第一個(gè)非static父元素為參照。如果沒(méi)有非static的父元素，則以body為參照。
下面是例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo1{ width: 200px; height: 200px; border: 5px solid red; } .demo2{ width: 200px; height: 100px; border: 5px solid green; position: absolute; top: 50px;/*給demo2一個(gè)絕對(duì)定位，并且距離body頂部 50px*/ } .demo3{ width: 200px; height: 200px; border: 5px solid black; } body{ border: 2px solid blue; } </style> </head> <body> <div>這是demo1的文本</div> <div>這是demo2的文本</div> <div>這是demo3的文本</div> </body> </html>
代碼效果如圖：
我們可以看到第二個(gè)p它相對(duì)body頂部向下移動(dòng)了50px；
3、position:fixed;
完全脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位，也就是這個(gè)p固定在瀏覽器窗口上了，不論我們?cè)趺赐蟿?dòng)滾動(dòng)條都無(wú)法改變它在瀏覽器窗口的位置。
下面是代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo1{ width: 200px; height: 200px; border: 5px solid red; } .demo2{ width: 200px; height: 100px; border: 5px solid green; position: fixed; right: 50px; } .demo3{ width: 200px; height: 200px; border: 5px solid black; } body{ border: 2px solid blue; } </style> </head> <body> <div>這是demo1的文本</div> <div>這是demo2的文本</div> <div>這是demo3的文本</div> </body> </html>
下面開(kāi)始講故事幫助大家理解脫離文檔流：
一個(gè)帥帥的男生（p1）和一個(gè)可愛(ài)的女孩紙(p2)，他們喜歡著對(duì)方，有一天，他們?cè)谝黄鹆?，從此過(guò)上了幸福的生活…..
故事怎么可能是這樣子的（皮一下）
隨著時(shí)間的推移，在某些事情的影響下（float、fixed、absolute），他們發(fā)現(xiàn)對(duì)方有很多的缺點(diǎn)，并不是完美的，有一天終于無(wú)法忍受對(duì)方，“咱們分手吧！”p1說(shuō)到，balabala，他們分手了（p1脫離了文檔流）?！澳憔彤?dāng)我死了吧”，p1說(shuō)到。雖然男孩紙p1和女孩紙p2都還在這個(gè)世界上過(guò)著自己的生活（p1和p2都還存在于DOM樹(shù)中），但是他們讓對(duì)方死在了自己的心中（盒子在定位的時(shí)候，會(huì)當(dāng)做沒(méi)看到它）。狗血的故事講完了。
