對CSS中的Position、Float屬性的一些深入探討

11699847034_6b43d779b8_z

對於Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性,對於這兩個屬性的使用上面可能大多數人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用上的一個介紹以及兩個屬性交叉使用上的一些探討。

此文章來自於:http://www.cnblogs.com/oer2001/archive/2013/08/03/3235294.html

 

HTML佈局的基本要點:

如果要掌握、運用好Position、Float屬性必須要對HTML的兩個基本點有清晰的了解。

  1. 盒子模型(box model)
  2. HTML的普通流(normal flow)

盒子模型

在HTML中元素的盒子模型分為兩種:塊狀元素、行內元素,請注意這裡的塊狀元素(Block)和行內元素(Inline)與Display屬性中的inline、block兩個屬性值並不等同。盒子模型中的Inline、Block類似於是Display屬性的父類,例如:Display屬性中的list-item屬性值是屬於塊狀(Block)類型的。

我們直觀的上看兩種盒子模型的區別

  • 塊狀(Block)類型的元素可以設置width、height屬性,而行內(Inline)類型設置無效。
  • 塊狀(Block)類型的元素會獨占一行(直觀的說就是會換行顯示,無法與其他元素在同一行內顯示,除非你主動修改元素的樣式),而行內(Inline)類型的元素則都會在一行內顯示。
  • 塊狀(Block)類型的元素的width默認為100%,而行內(Inline)類型的元素則是根據自身的內容及子元素來決定寬度。

列舉出一些大家常見的元素的分類

  • 塊狀元素:P、DIV、UL、LI、DD、DT…
  • 行內元素:A、IMG、SPAN、STRONG…

 

Position屬性:

我們首先來談談Position屬性,因為Position屬性能夠很好的體現HTML普通流這個特徵。重點在於應用了不同的position值之後是否有脫離普通流和改變Display屬性這兩點。

 

Position屬性值

Position的屬性值共有四個static、relative、absolute、fixed。

Static

所有元素在默認的情況下position屬性均為static,而我們在佈局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right在position為static的情況下無效。其用法為:在改變了元素的position屬性後可以將元素重置為static讓其回歸到頁面默認的普通流中。

Relative

俗稱的相對定位,重點在於對相對理解。我們此前說過每個元素在頁面的普通流中會有“佔用”一個位置,這個位置可以理解為默認位置,而相對定位就是將元素偏離元素的默認位置,普通流中依然保持著原有的默認位置,並沒有脫離普通流,只是視覺上發生的偏移。

Absolute

俗稱的絕對定位,絕對定位是相對而言的,怎麼理解呢?應用了position: absolute的元素會循著節點樹中的父(祖)元素來確定“根”,然後相對這個“根”元素來偏移。如果在其節點樹中所有父(祖)元素都沒有設置position屬性值為relative或者absolute則該元素最終將對body進行位置偏移。應用了position: absolute的元素會脫離頁面中的普通流並改變Display屬性(重點)

 

一些的position小知識

1)應用了position: relative/absolute的元素,margin屬性仍然有效,以position:relative來舉例。如果設置了left、top、bottom、right的屬性,建議大家不要設置margin數據,因為很難精確元素的定位,盡量減少干擾因素。

 

Fixed

在很長的時間裡,這個屬性值因為兼容性問題,並沒有得到非常廣泛的應用(IE6未實現該屬性值)。fixed和absolute有很多共同點:

  1. 會改變行內元素的呈現模式,使display之變更為block。
  2. 會讓元素脫離普通流,不佔據空間。
  3. 默認會覆蓋到非定位元素上。

fixed與absolute最大的區別在於:absolute的”根元素“是可以被設置的,而fixed則其”根元素“固定為瀏覽器窗口。即當你滾動網頁,其元素與瀏覽器窗口之間的距離是恆定不變的。

 

Float屬性

float的屬性值有none、left、right,有幾個要點:

  1. 只有橫向浮動,並沒有縱向浮動。
  2. 當元素應用了float屬性後,將會脫離普通流,其容器(父)元素將得不到脫離普通流的子元素高度。
  3. 一個元素會圍繞著浮動元素(典型運用是文字圍繞圖片),與應用了position的元素相比浮動元素並不會遮蓋後一個元素。
  4. 浮動元素的前一個元素不會受到任何影響(如果你想讓兩個塊狀元素並排顯示,必須讓兩個塊狀元素都應用float)。
  5. 會將元素的display屬性變更為block

與position的兼容性問題

1)元素同時應用了position: relative、float、(top / left / bottom / right)屬性後,則元素先浮動到相應的位置,然後再根據(top / left / bottom / right)所設置的距離來發生偏移。

 

回顧:如果你不將float的元素的position設置成relative的話,你想通過設置float元素的z-index來的達到覆蓋position:absolute是無效的。

同理,float元素下面存在position: absolute的子元素,如果你不將float的元素的position設置成relative的話,absolute元素是不會定位到float元素的。

 

同時應用position: absolute和float: left會導致清除浮動無效(position: relative則可以清除浮動)。
常用的清除浮動的方法有兩種:

  1. 通過在容器中添加一個標籤,設置該標籤的樣式為clear: both
  2. 容器設置overflow: hidden

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s