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
,那麼position
和 float
不起作用。在這種情況下,元素不產生框。因此浮動和定位無效。
2、如果position
的值是 absolute
或 fixed
,框就是絕對定位的,float
計算後的值應該是none
,並且,display
會被按照表-1設置。 框的位置將由 top
,right
,bottom
和 left
屬性和該框的包含塊確定。
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才能設置寬度與高度
- 如果元素是根元素,’display’ 的值按照轉換對應表設置。 (這一點不理解)