淺談CSS中display/float/position屬性值的相互影響
發(fā)布時間：2016-08-17 09:22:46 作者：佚名 
我要評論
我要評論下面小編就為大家?guī)硪黄獪\談CSS中display/float/position屬性值的相互影響。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
有3個屬性和布局以及box的創(chuàng)建有關：'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中未定義。）
否則，其余情況下'display'屬性值就是其指定的值。
其中inline-flex和flex是CSS3彈性布局模塊引入的新屬性值。
概括而言，絕對定位、彈性布局和網(wǎng)格布局容器的內(nèi)容項的display屬性會被塊級化（blockified）。
以上這篇淺談CSS中display/float/position屬性值的相互影響就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了CSS中的 position屬性sticky的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-12
css position屬性為absolute時其百分值的計算
這篇文章主要介紹了css position屬性為absolute時其百分值的計算,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2019-08-06
這篇文章主要介紹了詳解CSS中position屬性介紹(新增sticky) 的相關資料，position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和stic2018-12-17
這篇文章主要介紹了css中的position屬性值的探究(小結)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-25css關于position屬性的用法詳解(絕對定位和相對定位的混淆)
下面小編就為大家?guī)硪黄猚ss關于position屬性的用法詳解(絕對定位和相對定位的混淆)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-08- 這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點講解了相對定位和絕對定位在頁面布局中的作用,需要的朋友可以參考下2016-04-28
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下2015-11-06
CSS樣式position屬性的一個小實例:z方向三層布局分析
使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- 這篇文章主要介紹了CSS 中的position屬性實例詳解,定位屬性position有4個值，分別是靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）2023-09-04
