淺談position、display、float定位屬性

position

position 屬性規定元素的定位類型。

fixed

生成絕對定位的元素,相對於瀏覽器窗口進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

固定定位。元素將被設置在瀏覽器上一個固定位置上,不會隨其他元素滾動。是脫離文檔流的。

absolute

生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

相對於最近一個position是static的父元素,脫離文檔流。

relative

生成相對定位的元素,相對於其正常位置進行定位。因此,”left:20” 會向元素的 LEFT 位置添加 20 像素。

不會脫離文檔流。

static

默認值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。

inherit

規定應該從父元素繼承 position 屬性的值。

display

display 屬性規定元素應該生成的框的類型。

none 此元素不會被顯示。
block 此元素將顯示爲塊級元素,此元素前後會帶有換行符。
inline 默認。此元素會被顯示爲內聯元素,元素前後沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會作爲列表顯示。

還有其他一些值run-in,table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell ,table-caption,inherit。

float

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文本圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。

如果浮動非替換元素,則要指定一個明確的寬度;否則,它們會儘可能地窄。

註釋:假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間爲止。

left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動,並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。


設定值                                                          
display設置成inline-table,計算後的值是table。

display設置inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block,計算後的值是block。

設置成其他值,同設定值。

表-1 display經過計算後對應值

設定值 計算值
inline-table table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
其他值 同設定值

1、如果 display 的值爲 none,那麼positionfloat 不起作用。在這種情況下,元素不產生框。因此浮動和定位無效。

2、如果position 的值是 absolutefixed,框就是絕對定位的,float 計算後的值應該是none,並且,display 會被按照表-1設置。 框的位置將由 toprightbottomleft 屬性和該框的包含塊確定。

3、如果float 的值不是 none,該框浮動並且 display 的值會被按照表-1設置。

<style>
   .float {
        display: inline;
        float: right;
        width: 100px;
        height: 100px;
        background: #0ff;
    }
</style>


<span class="float"></span>

圖片display被設置成了block,可以用firebug查看 computed (計算)的屬性值,正因如此,span才能設置寬度與高度

  1. 如果元素是根元素,’display’ 的值按照轉換對應表設置。 (這一點不理解)

這裏寫圖片描述

參考:http://www.cnblogs.com/jackyWHJ/p/3756087.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章