国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

BFC理解

nevermind / 643人閱讀

摘要：解決高度塌陷的前提就是能識(shí)別并包含到浮動(dòng)元素。那有沒(méi)有一個(gè)更好的高度檢測(cè)方法呢答案是有的，就是我們經(jīng)常用到的。不支持，所以需要通過(guò)專有的屬性，觸發(fā)。

Block formatting context （塊級(jí)格式化上下文）

頁(yè)面文檔由塊block構(gòu)成 每個(gè)block在頁(yè)面上占據(jù)自己的位置
使用新的元素構(gòu)建BFC overflow：hidden | auto | scroll； 只要不為visible 新的空間
告訴瀏覽器，外面的環(huán)境影響不到我了 我重新來(lái)進(jìn)行Block formatting 布局和定位

核心：

新的BFC，給出了新的不受外界影響的塊級(jí)格式化環(huán)境  
block 塊級(jí)-> 頁(yè)面的基礎(chǔ)  
formatting context 格式化-> 渲染
瀏覽器構(gòu)建文檔樹(shù)的時(shí)候 布局和定位元素

網(wǎng)頁(yè)的定位（大） 文檔流正常，浮動(dòng)，定位，flex，table
廣義的定位 塊級(jí)元素的定位 垂直的定位；行內(nèi)元素 左右定位 通過(guò)內(nèi)容來(lái)確定
狹義的定位：
float 浮動(dòng)元素，在一行的開(kāi)始或者結(jié)束
flex 彈性布局
position

BFC 在正常的文檔流里面重建一個(gè)新的上下文環(huán)境

BFC的約束規(guī)則

一、在瀏覽器進(jìn)行頁(yè)面元素布局的時(shí)候 同一個(gè)BFC的兩個(gè)相鄰的Box的margin 會(huì)重疊，與方向無(wú)關(guān)

破壞規(guī)則 創(chuàng)建新的BFC Context上下文的概念

如何創(chuàng)建BFC？=>重新規(guī)劃一個(gè)（獨(dú)立）渲染區(qū)域

根元素body，天然是一個(gè)BFC

overflow:hidden;

float 不為none

display:inline-block | table-cell |table-caption

position:absolute | fixed 只要不為static

> 好像只剩塊級(jí)元素和行內(nèi)元素不是BFC

二、BFC的高度，浮動(dòng)元素也要參與計(jì)算

在元素float 之后脫離了文檔流沒(méi)有辦法計(jì)算確切高度，這種情況我們稱之為高度塌陷。解決高度塌陷的前提就是能識(shí)別并包含到浮動(dòng)元素。而BFC就有這個(gè)特性，所以BFC也可以計(jì)算浮動(dòng)元素的高度。新建BFC讓浮動(dòng)元素也參與計(jì)算

三、每個(gè)元素的左邊，要與包含盒子的左邊相接觸

四、BFC的區(qū)域不會(huì)與float box重疊

    


    
    

    


/*BFC在三欄式布局中的應(yīng)用*/
    


    
    

        
        
Left

        
Right

        
Center

注意：

通過(guò) overflow:hidden將元素轉(zhuǎn)換為BFC，固然可以解決高度塌陷的問(wèn)題，但是大范圍的應(yīng)用在布局上是肯定是行不通的，畢竟overflow會(huì)造成溢出隱藏的問(wèn)題，特別是與JS交互的效果時(shí)。

那有沒(méi)有一個(gè)更好的高度檢測(cè)方法呢？
答案是有的，就是我們經(jīng)常用到的clearfix。

.clearfix:after{
    content:"";
    display:table;
    clear:both
}
.clearfix{
    *zoom:1;/* IE6,7不支持BFC，所以需要通過(guò)專有的CSS屬性，觸發(fā)hasLayout。*/
}

關(guān)于zoom:1

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113452.html

相關(guān)文章

  • 理解 CSS 布局和 BFC

    摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來(lái)解決這個(gè)布局問(wèn)題。是布局中的一個(gè)迷你布局你可以將看作是頁(yè)面內(nèi)的一個(gè)迷你布局。理解瀏覽器如何布置網(wǎng)頁(yè)是非常基礎(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽(tīng)說(shuō)過(guò)這個(gè)術(shù)語(yǔ)，但是如果你曾經(jīng)用CSS做過(guò)布局，你可能知道它是什么...

    miya 評(píng)論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級(jí)格式化上下文，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念...

    shixinzhang 評(píng)論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級(jí)格式化上下文，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個(gè)概念...

    vspiders 評(píng)論0 收藏0

  • JS每日一題: 如何理解CSS中BFC?

    摘要：期如何理解中定義塊格式化上下文，是頁(yè)面的可視化渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁(yè)面的可視化CSS渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 BFC 特性及應(yīng)用 同一個(gè)...

    lentoo 評(píng)論0 收藏0

  • 5分鐘理解BFC原理

    摘要：一概念即塊級(jí)格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來(lái)講，可以把理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...

    Achilles 評(píng)論0 收藏0

  • 5分鐘理解BFC原理

    摘要：一概念即塊級(jí)格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。通俗一點(diǎn)來(lái)講，可以把理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子...

    tulayang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<