溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了html5文檔流如何脫離的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇html5文檔流如何脫離文章都會有所收獲，下面我們一起來看看吧。
html5中，文檔流又稱“普通流”，指的是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排列方式；并且最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。脫離文檔流的方法：1、float浮動；2、position定位。
本教程操作環(huán)境：windows7系統(tǒng)、PHP7.1版、DELL G3電腦
一、什么是文檔流？
“流”，我們在生活中經(jīng)常聽到這個詞，比如水流，電流。就像水流從高處往低處流一樣，我們可以把文檔流想象成html元素在瀏覽器上“流動”。瀏覽器的頂端就是河流的源頭，瀏覽器的底部就是河流的盡頭。
那么所謂的文檔流（normal flow，也被稱為“普通流”），指的是就是元素排版布局過程中，元素會自動從左往右，從上往下地遵守這種流式排列方式。
當瀏覽器渲染html文檔時，從頂部開始開始渲染，為元素分配所需要的空間，每一個塊級元素單獨占一行，行內元素則按照順序被水平渲染直到在當前行遇到了邊界，然后換到下一行的起點繼續(xù)渲染。那么此時就不得不說一下塊級元素和行內元素。
二、塊級元素與行內元素
塊級元素：顧名思義，這個元素是“一塊”，那么作為一個塊，它就應該有自己的寬度和高度。而且它比較霸道，每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外），一般作為容器使用，常見的塊級元素有：from、select、 textarea、h2-h7 、table 、button 、hr 、p 、ol 、ul等。
結合以上內容，塊級元素擁有以下特點：
每個塊級元素都是獨自占一行。
元素的高度、寬度、行高和邊距都是可以設置的?！ ?/p>
元素的寬度如果不設置的話，默認為父元素的寬度。
行內元素：顯然，這種元素存在于一行內，且能與別的行內元素共同享有一行。常見的行內元素有：span、input、a、em、strong、b、br、img、select、button等。
那么行內元素擁有的特點如下：
每一個行內元素可以和別的行內元素共享一行，相鄰的行內元素會排列在同一行里，直到一行排不下了，才會換行。
行內元素設置width, height無效（此處有坑，請往下看），寬度隨元素的內容而變化。
行內水平方向的padding-left和padding-right都會產(chǎn)生邊距效果，但是豎直方向上的padding-top和padding-bottom都不會產(chǎn)生邊距效果。
三、替換元素和非替換元素
細心的大家肯定發(fā)現(xiàn)了，像<img>、<input>、<select>、<textarea>等，它們也是行內元素呀，明明就可以設置寬高啊，那這里就有問題了。其實并不是所有的行內元素都不能設置寬高的。
行內元素也分為兩種：替換元素和非替換元素。
替換元素：
瀏覽器根據(jù)元素的標簽和屬性，來決定其的具體顯示內容的元素，常見的有：<img>、<input>、<select>、<textarea>、<object>。比如瀏覽器根據(jù)<img >標簽的src屬性顯示圖片。根據(jù)<input>的type屬性決定顯示輸入框還是按鈕，它們的寬度和高度是可以設置的。
非替換元素：
內容直接表現(xiàn)給用戶端的元素稱為成為非替換元素，常見的有：<span>、<p>、<label>等。例如<span>，它會將開始和結束標簽中的內容直接在瀏覽器上展示出來。
所謂脫離文檔流，即將元素從普通的布局排版（普通文檔流）中脫離出來，其他盒子在定位的時候，會當做沒看到它（余生你不必再指教了），兩者位置重疊都是可以的，但是依然在DOM樹中存在。
那么會使元素脫離文檔流的情況有哪些呢？
1、float產(chǎn)生的浮動
使用float脫離文檔流時，雖然其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環(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>代碼運行效果：
2、position:absolute;
absolute是絕對定位，絕對定位的元素以第一個非static父元素為參照。如果沒有非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一個絕對定位，并且距離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>代碼效果如圖：
我們可以看到第二個p它相對body頂部向下移動了50px；
3、position:fixed;
完全脫離文檔流，相對于瀏覽器窗口進行定位，也就是這個p固定在瀏覽器窗口上了，不論我們怎么拖動滾動條都無法改變它在瀏覽器窗口的位置。
下面是代碼：
<!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>
關于“html5文檔流如何脫離”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“html5文檔流如何脫離”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
