首頁 > web前端 > css教學 > 詳解CSS中display/float/position屬性值的相互影響

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

高洛峰
發布: 2017-03-04 09:57:12
原創
1900 人瀏覽過

有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屬性值的相互影響以上這篇淺談CSS中display/float/position屬性值的相互影響就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳PHP中文網。

更多詳解CSS中display/float/position屬性值的相互影響相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板