我們都知道,元素分為行內元素和塊級元素,在頁面布局中,我們常常需要讓行內元素具有塊級元素的特性,或者使塊級元素轉換成行內元素,這就要使用我們的display屬性了.
我們先定義三個div:
以上的三個div都是塊級元素,輸出的結果為:
塊級元素的特征就是各占一行.
接下來用display將第二個div轉換成行內元素:(先看一下幾個現象)
1.
結果變成了:
2.
將后面兩個div都轉成行內元素:
結果是:
3.
只把第二個元素轉換為行內元素,增加div的高度:
結果是這樣:
4.
把所有的div轉換成行內元素:
結果:
以上結果是由什么導致的,我們來分析一下:
首先,三個div是塊級元素,輸出的結果就是從上到下依次排列.
當我使用display將第二個div轉換成行內元素時,想像中的應該是第一個div獨占一行第二個div和第三個div排在第三行,但是結果卻是現象1那樣,各占一行,結果與想象不一致,所以我們要多實踐.
接下來我繼續讓第二個和第三個div都轉換成行內元素,后兩個div排在了一行(現象2).
最后把所有的div轉成了行內元素,三個div都轉成了一行(現象4).
不知道你們注意到沒有:
1.(現象2)中,第二個div轉變成了行內元素之后,我寬度沒有任何的改變,但是結果就是被轉變的div沒有寬度.
2.在(現象3)中,我特意增加了div的高度,第二個div沒有任何變化
3.轉變成行內元素的div頂部緊跟着上一個div
其實這些都是行內元素的特性,既然都到這里了,我還是把它寫出來供大家參考吧:
1.針對行內元素設置的寬和高都是無效的.
2.行內元素的margin-left,margin-right有效,margin-top,margin-bottom無效.
以上現象已經充分顯現出了行內元素的特性.也體現出了display的作用.我們再來看一個將行內元素轉換成塊級元素的例子:
先設置邊框及元素:
結果:
好像看不出什么,那接下來:
將第二個span用display設置成塊級元素,增加span長度和高度的設置:
結果:
通過這個例子:我們看到第二個span已經轉成了塊級元素,設置的寬和高都起了作用.
display是頁面布局中常用的屬性,也是比較重要的屬性,我們應該熟練掌握他的用法並加以應用.
再介紹一個position屬性:
position是一種定位的方法,它分為相對定位,絕對定位,靜態定位以及固定定位:
先進行如下設置:
輸出結果:
我們看到了div的位置如上圖所示:
先介紹相對定位(relative):
對.inner進行設置:
結果:
內層div的位置在外層div內發生了移動,它的參照對象是本身的div,不會脫離常規流,也不會對其他的元素造成影響.
下面看絕對定位(absolute):
結果:
這個結果說明了絕對定位使元素脫離常規流,它的參照點變為了容器的基點,也就是瀏覽器的基點.
但是,如果它外層的div也有設置position屬性的(除了static),那么它的參照點就是外層div的左上頂點.
如下圖:
結果:
靜態定位:
是position的默認屬性:
設置:
結果:
靜態定位會使元素正常定位並按照元素出現的順序依次格式化,如上圖.
固定定位(fixed):
將元素固定在某一位置,不隨滾動條滾動而移動,這里不做詳細的討論了.