display、float、position 的關(guān)系
2023-02-03 09:57 作者:網(wǎng)星軟件 | 我要投稿
(1)首先判斷 display 屬性是否為 none,如果為 none,則 position 和 float 屬性的值不影響元素最后的表現(xiàn)。
(2)然后判斷 position 的值是否為 absolute 或者 fixed,如果是,則 float 屬性失效,并且 display 的值應(yīng)該被設(shè)置為 table 或者 block,具體轉(zhuǎn)換需要看初始轉(zhuǎn)換值。
(3)如果 position 的值不為 absolute 或者 fixed,則判斷 float 屬性的值是否為 none,如果不是,則 display 的值則按上面的規(guī)則轉(zhuǎn)換。注意,如果 position 的值為 relative 并且 float 屬性的值存在,則 relative 相對于浮動后的最終位置定位。
(4)如果 float 的值為 none,則判斷元素是否為根元素,如果是根元素則 display 屬性按照上面的規(guī)則轉(zhuǎn)換,如果不是,則保持指定的 display 屬性值不變。
總的來說,可以把它看作是一個類似優(yōu)先級的機制,"position:absolute"和"position:fixed"優(yōu)先級最高,有它存在的時候,浮動不起作用,'display'的值也需要調(diào)整;其次,元素的'float'特性的值不是"none"的時候或者它是根元素的時候,調(diào)整'display'的值;最后,非根元素,并且非浮動元素,并且非絕對定位的元素,'display'特性值同設(shè)置值。
標簽: