淺談CSS中display/float/position屬性值的相互影響
我要評(píng)論有3個(gè)屬性和布局以及box的創(chuàng)建有關(guān)：'display', 'position' 和 'float'，彼此交互作用如下：
如果'display'值為'none'，則'position' 和 'float'無(wú)作用。這種情況下，不生成box。
否則，如果'position'值為'absolute' 或 'fixed', box被絕對(duì)定位，'float'的計(jì)算值為'none'，而'display'的值按下表設(shè)定。box的位置將由'top', 'right', 'bottom' 和 'left' 屬性及其包容塊所確定。
否則，如果'float'的值不是'none', box是浮動(dòng)的并且'display'的值按下表設(shè)定。
否則，如果元素為根元素，'display'的值按下表設(shè)定（除了list-item指定值，該值被計(jì)算為'block'還是'list-item'，在CSS2.1中未定義。）
否則，其余情況下'display'屬性值就是其指定的值。
其中inline-flex和flex是CSS3彈性布局模塊引入的新屬性值。
概括而言，絕對(duì)定位、彈性布局和網(wǎng)格布局容器的內(nèi)容項(xiàng)的display屬性會(huì)被塊級(jí)化（blockified）。
以上這篇淺談CSS中display/float/position屬性值的相互影響就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS中的 position屬性sticky的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-12
css position屬性為absolute時(shí)其百分值的計(jì)算
這篇文章主要介紹了css position屬性為absolute時(shí)其百分值的計(jì)算,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-08-06
這篇文章主要介紹了詳解CSS中position屬性介紹(新增sticky) 的相關(guān)資料，position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和stic2018-12-17
這篇文章主要介紹了css中的position屬性值的探究(小結(jié))的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-25css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)
下面小編就為大家?guī)?lái)一篇css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-08- 這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點(diǎn)講解了相對(duì)定位和絕對(duì)定位在頁(yè)面布局中的作用,需要的朋友可以參考下2016-04-28
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下2015-11-06
CSS樣式position屬性的一個(gè)小實(shí)例:z方向三層布局分析
使用CSS樣式中的position屬性實(shí)現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- 這篇文章主要介紹了CSS 中的position屬性實(shí)例詳解,定位屬性position有4個(gè)值，分別是靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed）2023-09-04
