css-position,float,display的關係和優先順序
阿新 • • 發佈:2019-01-05
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特性值