詳解CSS中display/float/position屬性值的相互影響

有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中文網！