一、首先,按照普通流和非普通流來分類:
②非普通流:顧名思義就是脫離普通流的,在普通流上面是不佔據位置的。css有position的樣式,position包括:static,relative,absolute,fixed四種值。其中static是屬於普通流;relative也是屬於特殊的普通流,詳細下面有介紹;absolute和fixed以及float就是屬於非普通流的,載入的時候,也會順序載入,但是會脫離普通流的位置。
看**:
普通的文件流:
<
html
>
<
head
>
<
title
>
title
>
<
meta
content
="text/html; charset=gb2312"
/>
<
style
>
.a.b
.cstyle
>
head
>
<
body
>
<
divclass
= "a
">
<
divclass
= "b
">
div>
<
divclass
= "c
">
div>
div>
body
>
html
>
顯示如圖:
2個div都是文件流,都是行級元素,所有都佔一行。
脫離文件流:
這裡的用浮動脫離文件流,所以在父div中,當它不存在寬和高。
就別就是文字的區別:需要注意的是,使用float脫離文件流時,其他盒子會無視這個元素,但其他盒子內的文字依然會為這個元素讓出位置,環繞在周圍。css中脫離文件流,也就是將元素從普通的布局排版中拿走,其他盒子在定位的時候,會當做脫離文件流的元素不存在而進行定位。
而對於使用absolute positioning脫離文件流的元素,其他盒子與其他盒子內的文字都會無視它。
浮動:
<
可以看到文字會環繞浮動的盒子。
絕對定位:
可以看到文字是無視絕對定位的盒子的。。。。。
float和absolute有什麼區別?
一 首先,按照普通流和非普通流來分類 非普通流 顧名思義就是脫離普通流的,在普通流上面是不佔據位置的。css有position的樣式,position包括 static,relative,absolute,fixed四種值。1 static是屬於普通流 2 relative也是屬於特殊的普通流 3 ...
relative 和 absolute 的位置區別
relative 和 absolute 的位置區別 position absolute 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top right bottom left 下面簡稱trbl 進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定pos...
關於absolute和relative 的一些簡介
position absolute 他的意思是絕對定位,他是參照瀏覽器的左上角,配合top right bottom left 下面簡稱trbl 進行定位,在沒有設定trbl,預設依據父級的做標原始點為原始點。如果設定trbl並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器...