css中的display以及position屬性

咱們都知道,元素分爲行內元素和塊級元素,在頁面佈局中,咱們經常須要讓行內元素具備塊級元素的特性,或者使塊級元素轉換成行內元素,這就要使用咱們的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):

將元素固定在某一位置,不隨滾動條滾動而移動,這裏不作詳細的討論了.