有3個屬性和佈局以及box的創建有關:'display', 'position' 和'float',彼此交互作用如下:
如果'display'值為'none' ,則'position' 和'float'無作用。這種情況下,不產生box。
否則,如果'position'值為'absolute' 或'fixed', box被絕對定位,'float'的計算值為'none',而'display'的值按下表設定。 box的位置將由'top', 'right', 'bottom' 和 'left' 屬性及其包容塊所決定。
否則,如果'float'的值不是'none', box是浮動的並且'display'的值按下表設定。
否則,如果元素為根元素,'display'的值按下表設定(除了list-item指定值,該值被計算為' block'還是'list-item',在CSS2.1中未定義。值。
其中inline-flex和flex是CSS3彈性佈局模組引入的新屬性值。
概括而言,絕對定位、彈性佈局和網格佈局容器的內容項目的display屬性會被區塊級化(blockified)。以上這篇淺談CSS中display/float/position屬性值的相互影響就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳PHP中文網。
更多詳解CSS中display/float/position屬性值的相互影響相關文章請關注PHP中文網!