position和BFC

xiongzenghui 發(fā)布于2019-04-23 13:41 / 2802人閱讀

摘要：相對(duì)定位相對(duì)自身位置定位，不會(huì)脫離文本流，相當(dāng)于是個(gè)參照物，給子代元素作為參照。絕對(duì)定位脫離文本流，不占據(jù)空間，相對(duì)于最近的有定位屬性的祖籍元素定位。固定定位相對(duì)于窗口進(jìn)行定位。

一、關(guān)于position
流定位：不能通過(guò)left/top屬性來(lái)進(jìn)行定位（那用什么定位），上下排列的元素縱向邊距會(huì)被合并，左右元素橫向邊距不會(huì)合并。
浮動(dòng)定位：脫離文本流，就好像不在父元素中，像是浮在父元素的上方。
相對(duì)定位：相對(duì)自身位置定位，不會(huì)脫離文本流，相當(dāng)于是個(gè)參照物，給子代元素作為參照。
絕對(duì)定位：脫離文本流，不占據(jù)空間，相對(duì)于最近的有定位屬性的祖籍元素定位。
固定定位：相對(duì)于窗口進(jìn)行定位。

二、BFC 塊級(jí)格式化上下文
BFC會(huì)阻止垂直外邊距的折疊，對(duì)于的嵌套元素來(lái)說(shuō)，只要將父元素設(shè)置BFC就不會(huì)和父元素的margin重疊了

（這么牛X怎么實(shí)現(xiàn)BFC）

形成條件：
float：left/right
overflow:hidden/auto/scroll
display:inline-block
position:absolute/fixed

常見(jiàn)的清除浮動(dòng)的方法
1、

zoom:1;
after{
    content:" ";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}

2、

zoom:1;
after{
    content:"";
    display:table;
    clear:borth;
}

清除浮動(dòng)只有兩種方式，一種是用clear清除浮動(dòng)，二是使用父級(jí)元素形BFC。

云服務(wù)器 GPU云服務(wù)器 float和position bfc bfc布局 position()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2219.html

相關(guān)文章

CSS中重要的BFC

摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...

plus2047 2019-08-29 14:20 評(píng)論0 收藏0
《CSS世界》筆記四：流的保護(hù)與破壞

摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會(huì)詳細(xì)講解結(jié)界全稱(chēng)為，中文為塊級(jí)格式化上下文。上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏寫(xiě)在前面原本博客名為浮動(dòng)與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動(dòng)定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

he_xd 2019-08-29 16:20 評(píng)論0 收藏0
關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。如何觸發(fā)只需要保證滿足下面至少一條就會(huì)觸發(fā)根元素設(shè)置了值不為的元素設(shè)置了屬性不為的元素設(shè)置了屬性不為和的元素設(shè)置了的值為和中的任何一個(gè)的元素。作者：心葉時(shí)間：2018-04-18 17:53 包裹元素剪裁條件是不是包裹元素overflow設(shè)置為hidden以后，內(nèi)部元素如果超過(guò)包裹元素的話就會(huì)被剪...

codercao 2019-08-29 15:06 評(píng)論0 收藏0
深入理解css之BFC

摘要：屬性，會(huì)破壞文檔流，與非定位元素很難結(jié)合起來(lái)用，因此也不適合自適應(yīng)布局。，其對(duì)無(wú)感，無(wú)法自適應(yīng)剩余瀏覽器空間?？偨Y(jié)的定義，就如同結(jié)界一樣，完全封閉對(duì)外無(wú)任何影響。引起的各種屬性與自適應(yīng)布局自適應(yīng)布局與屬性說(shuō)明 BFC的定義 BFC的全稱(chēng)是block formatting context（塊狀格式化上下文），當(dāng)BFC起作用的時(shí)候，其元素內(nèi)部無(wú)論怎么翻江倒海都不會(huì)影響到外部元素，同樣，外部...

姘擱『 2019-08-30 15:54 評(píng)論0 收藏0
CSS魔法堂：你一定誤解過(guò)的Normal flow

摘要：后來(lái)終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純?cè)O(shè)置效果與采用是一樣的魔法堂就這個(gè)樣，而浮動(dòng)定位也是基于。相對(duì)定位的最強(qiáng)武器就是個(gè)屬性了，好明顯它們默認(rèn)值均是。前言 ?剛接觸CSS時(shí)經(jīng)常聽(tīng)到看到一個(gè)詞文檔流，那到底什么是文檔流呢？然后會(huì)看到絕對(duì)定位和浮動(dòng)定位能脫離文檔流，從這句可以看到文檔流和絕對(duì)定位、浮動(dòng)定位是同一個(gè)范疇的概念，再后來(lái)在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...

Hancock_Xu 2019-08-30 12:56 評(píng)論0 收藏0