文件流(普通流)
在文件流中,html 元素會按照其在 html文件中的位置順序來排布,將窗體自上而下分成一行一行,並在每行中左至右的挨次排放行內元素,遇到阻礙或者寬度不夠自動換行。而塊狀元素將獨佔一行。 塊級元素和行內元素.
文字流
文字流是相對於文字段落講的。可視為一串字元由左到右、由上而下的讀取和輸出形式
脫離文件流
脫離文件流只有三種情況
脫離文件流並不是將它從dom樹中移除,只是其他盒子定位的時候,當作沒看到它。其後面的元素會直接無視這個脫離了文件流的元素,直接正常補位上去。而該元素自身也不會再受到文件流布局的束縛。
浮動元素浮動之後,會讓它跳出文件流,也就是說當它後面還有元素時,其他元素會無視它沒有浮動前佔據的區域,直接在它身下布局。但文字卻會認同浮動元素浮動前所佔據的區域,圍繞它布局,也就是沒有脫離文字流。
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
.demo1
.demo2
<
/style>
<
/head>
="demo1"
>這是demo1的文字<
/div>
="demo2"
>這是demo2的文字<
/div>
="demo2"
>talk is cheap show your <
/div>
<
/body>
<
/html>?注釋了浮動的
(圖一)
?開啟了浮動的
(圖二)
?開啟了浮動的並設定demo2width:250px
(圖三)
❓圖2文字為何會重疊?
當你div
往上推的時候,當div
上邊框碰到了浮動塊的下邊框時候,文字流就不會繼續上移了
❓圖3下面文字為何上移一行?
溢位部分(不與浮動塊重疊)的div
空間,有足夠空間存放文字,就會文字流讀取,把原來在下方的文字流移動上去了一行
絕對定位和固定定位
絕對定位和固定定位,不僅會把元素盒子拖出文件流,盒子內的文字也會拖出文字流。可以使用z-index
來讓底部的元素到上面來,類似於乙個圖層的概念。效果差不多,固定定位只是相對於瀏覽器視窗進行定位,也就是這個div固定在瀏覽器視窗上了,不論我們怎麼拖動滾動條都無法改變它在瀏覽器視窗的位置。
<
!doctype html>
"en"
>
"utf-8"
>
title<
/title>
.demo1
.demo2
<
/style>
<
/head>
="demo1"
>這是demo1的文字<
/div>
="demo2"
>這是demo2的文字<
❓為什麼demo2的div沒有和demo1的div
重疊呢?
因為瀏覽器自帶樣式使頁面內容留白幾個畫素。
float探索,脫離文件流?不脫離文件流?
float屬性是css2中的乙個屬性,很多時候我們都會用到她,但是通常只要一不小心就會遇到很多問題,跟設想的完全不一樣呀,怎麼回事?那麼這個時候我們應該冷靜下來好好探索一下這個屬性的用法,弄明白其原理,適用於什麼場景,這樣在任何情況下都能正確的使用她。最初,float是應用於影象,使文字環繞在其周圍...
HTML頁面中的文件流以及脫離文件流
一 文件流 在我們生活中,有各種各樣的 流 有電流 水流等,就像水流從高處往低處流一樣,我們可以把文件流想象成html元素在瀏覽器上 流動 瀏覽器的頂端就是河流的源頭,瀏覽器的底部就是河流的盡頭。如下圖 而所謂的文件流 normal flow,也被稱為 普通流 指的是就是元素排版布局過程中,元素會自...
CSS脫離文件流
脫離文件流 也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文件流的元素不存在而進行定位。需要注意的是,使用float脫離文件流時,其他盒子會無視這個元素,但其他盒子內的文字依然會為這個元素讓出位置,環繞在周圍。其他盒子與其他盒子內的文字都會無視它。float 如上圖 div2實...