1. 程式人生 > >css-position,float,display的關係和優先順序

css-position,float,display的關係和優先順序

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

如果display是none,則position和float不起作用。因為元素不產生框,因此浮動和定位無效。若display不是none,則繼續

2. ‘position’ 的值是 ‘absolute’ 或 ‘fixed’

框是相對定位的,計算後的float應該是none。並且display按照上表設定。框的位置將由 ‘top’,’right’,’bottom’ 和 ‘left’ 屬性和該框的包含塊確定。

也就是說,當元素是絕對定位時,浮動失效,’display’ 會被按規則重置。
若position不是absolute或fixed,則繼續

3.float的值不是none

如果float值不是none,則該框浮動並且display按照轉換對應表設定,若float是none

4.元素是根元素

如果元素是根元素,display值按照對應表設定,否則,按照5

5.應用指定的display特性值