所謂文件流就是按照元素的順序從左到右、由上而下的方式排列。
預設的文件流很多時候不能滿足我們的布局要求,需要更豐富的布局手段,這就需要用到定位了。定位方式有:static、fixed、relative、absolute。
static靜態定位(預設)
無定位,元素正常出現在文件流中
不受left,right,top,bottom的影響
relative相對定位
absolute絕對定位lang
="en"
>
>
charset
="utf-8"
>
>
相對定位title
>
>
div.div1
.div2
.div3
style
>
head
>
>
class
="div1"
>
div>
class
="div2"
>
div>
class
="div3"
>
div>
body
>
html
>
z-index>
>
charset
="utf-8"
>
>
title
>
head
>
>
div#div21
#div22
#div23
style
>
>
"div1"
>
div>
"div2"
>
"div21"
>
div>
"div22"
>
div>
"div23"
>
div>
div>
body
>
html
>
重新定位之後可能會出現重疊,通過z-index可以調整其順序。z-index預設值為auto,即與父元素相同,可以設定為數值,數值大的層位於相對小的上方。
定位總結
(1)標準文件流按照從左到右、自上而下的方式依次排列元素。若要改變預設布局方式則需使用relative、absolute、fixed等定位方式;
(2)relative是相對於其原有位置進行偏移;
(3)absolute是相對於其父容器進行偏移,注意其父容器必須是有定位的,即非預設(static)定位方式,否則會一直往上追溯,直到頁面;
(4)fixed是相對於整個頁面進行偏移。
(5)relative不會從標準流脫離,而absolute和fixed都從標準流中脫離出來
通過設定浮動(float),可以使得元素從原本的文件流中脫離出來,感覺像浮在原本的文件流上面。
顯示效果>
>
charset
="utf-8"
>
>
title
>
head
>
>
#div1,#div5
#div2,#div4
#div3
style
>
>
"div1"
>
div>
"div2"
>
div>
"div3"
>
div>
"div4"
>
div>
"div5"
>
div>
body
>
html
>
從結果中可以看出,div5不見了,實際上div是被浮動的div2、div3、div4給覆蓋了,可以通過除錯工具檢視到。
如何讓div5能夠正常顯示呢?
需要清除浮動,在div4後增加乙個div,並設定其樣式為清除浮動
#clear
python學習系列 day07
一 執行緒與程序 1 threadlocal 定義為乙個全域性變數,每乙個執行緒可以訪問,但是其在各個執行緒之間的訪問是不相互影響。對於各個執行緒來將就是區域性變數。import threading local school threading.local 定義乙個threadlocal物件 def...
java學習day07 常用API
2018.6.11 1.object 所有類的父類 tostring 列印物件的位址值 hashcode 物件的儲存位置的演算法 equals 比較的是記憶體位址,比的是值。對於 如果作用於基本資料型別的變數,則直接比較其儲存的 值 是否相等 如果作用於引用型別的變數,則比較的是所指向的物件的位址 ...
實訓Day07學習日誌
今天加深了對列表渲染的理解 在元件上使用wx for控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item page 使用wx for item可以指定陣列當前元素的變數名,使用wx for index可以指定陣列...