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

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于BFC

lordharrd / 3190人閱讀

摘要：簡(jiǎn)單理解就是一種渲染規(guī)則，規(guī)定了頁(yè)面上元素如何渲染，元素與元素之間的關(guān)系。接上條規(guī)則垂直順序排列的元素的距離取決于的大小。的元素內(nèi)外互不影響。高度包含浮動(dòng)元素高度。相鄰的兩個(gè)元素的會(huì)重疊。

1.什么是BFC?

  BFC是Block farmatting context 的簡(jiǎn)寫(xiě)。翻譯過(guò)來(lái)即：塊級(jí)格式化上下文。farmatting context
   簡(jiǎn)單理解就是一種渲染規(guī)則， 規(guī)定了頁(yè)面

上元素如何渲染，元素與元素之間的關(guān)系。具體就BFC來(lái)說(shuō)，此規(guī)則或者說(shuō)此渲染區(qū)域具有塊與塊之間
相互獨(dú)立，內(nèi)部元素互不影響的特點(diǎn)。




  BFC的布局規(guī)則：

內(nèi)部元素會(huì)在垂直方向按順序排列。

接上條規(guī)則,垂直順序排列的元素的距離取決于margin的大小。相鄰的兩個(gè)元素的margin會(huì)重疊。

每個(gè)元素的左邊會(huì)盡可能的去接觸盒子（形成BFC的元素）的左邊。

BFC的元素不會(huì)和float的元素重疊。

BFC的元素內(nèi)外互不影響。

BFC高度包含浮動(dòng)元素高度。

2.如何生成BFC

 常見(jiàn)的：

float屬性為非none時(shí)，如left,right。

position屬性為fixed或者absolute時(shí)。

display屬性為inline-block或者為table-cell時(shí)。

overflow為非visible時(shí)。

3.BFC有什么用？

1.可以清除浮動(dòng)：

//清除浮動(dòng)前的代碼：
//css:
    .box{
            border:1px solid red;
            width: 400px;
        }
    .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
 //html


    

    


        
        

 可以看到邊框?yàn)榧t色的div因?yàn)楦?dòng)塌陷了，我們給此div加上overflow：hidden,形成BFC:

//css
  .box{
            border:1px solid red;
            width: 400px;
            overflow: hidden;
        }
        .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
//html:     



    

    



 可以看到div被撐起來(lái)了。用的以下規(guī)則：

BFC高度包含浮動(dòng)元素高度。
2.左邊固定，右邊自適應(yīng)布局：

 //css
   .box{
        border:1px solid red;
        width: 400px;
        height: 300px;
        position: relative;
    }
    .a{
        float: left;
        width: 200px;
        height: 100px;
        background: olivedrab;
    }
    .b{
        background: #777;
        height: 300px;
    }
    
    //html:
         

            
我是a

            
我是b

        

        
     

(可以用這個(gè)做做文字環(huán)繞圖片什么的。。)

再看加上float,形成BFC:

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{
            float: left;
            width: 200px;
            height: 100px;
            background: olivedrab;
        }
        .b{
            background: #777;
            height: 300px;
            overflow: hidden;
        }
        
//html


    
我是a

    
我是b



左邊就自適應(yīng)寬度了。規(guī)則：

overflow為非visible時(shí)。

3.解決margin重疊問(wèn)題：

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        
//html


    
我是a

    
我是b





 看代碼可以知道a的margin-bottom加b的margin-top 等于 100+100，然而空白區(qū)域只有100像素。這就是發(fā)生了margin重疊！
 
 那我們?nèi)绾蝸?lái)解決這個(gè)問(wèn)題呢？我們知道有這個(gè)規(guī)則：
接上條規(guī)則,垂直順序排列的元素的距離取決于margin的大小。相鄰的兩個(gè)元素的margin會(huì)重疊。
 那我們反其道而行之不就行了嗎！ 于是我們改造結(jié)構(gòu)，讓a和b不在同一個(gè)BFC內(nèi)： 
 

//css

  .box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
        
//html




    
我是a

    

        
我是b

    





可以看到，距離為200PX了。

---------------------------------------結(jié)束分割線(xiàn)--------------------------------------------------------------------

以前總是聽(tīng)別人說(shuō)BFC，專(zhuān)門(mén)了解了一下寫(xiě)了此文章。忘了拿出來(lái)看看。說(shuō)不定面試也會(huì)問(wèn)到一些呢。- - 暫時(shí)就寫(xiě)到這里了。有什么問(wèn)題請(qǐng)多多吐槽。

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

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

相關(guān)文章

  • 關(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

  • 關(guān)于BFC的一些應(yīng)用

    摘要：關(guān)于的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個(gè)人認(rèn)為很不錯(cuò)的文摘。那今天要說(shuō)的是關(guān)于它的一些技巧性應(yīng)用，通過(guò)示范比較常會(huì)接觸到的排版布局方面的需求來(lái)說(shuō)明下。對(duì)于結(jié)構(gòu)有一點(diǎn)要求，觸發(fā)的元素必須位于最后一位。 關(guān)于Block Formatting Context(BFC)的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個(gè)人認(rèn)為很不錯(cuò)的文摘。 那今天要說(shuō)的...

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

  • 關(guān)于BFC的一些應(yīng)用

    摘要：關(guān)于的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個(gè)人認(rèn)為很不錯(cuò)的文摘。那今天要說(shuō)的是關(guān)于它的一些技巧性應(yīng)用，通過(guò)示范比較常會(huì)接觸到的排版布局方面的需求來(lái)說(shuō)明下。對(duì)于結(jié)構(gòu)有一點(diǎn)要求，觸發(fā)的元素必須位于最后一位。 關(guān)于Block Formatting Context(BFC)的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個(gè)人認(rèn)為很不錯(cuò)的文摘。 那今天要說(shuō)的...

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

  • 關(guān)于BFC的總結(jié)

    摘要：雖然工作這么多年了，但是如果讓我直接解釋一下什么是的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。兩個(gè)兄弟盒之間的垂直距離由屬性決定。最常見(jiàn)的有簡(jiǎn)稱(chēng)和簡(jiǎn)稱(chēng)。 雖然工作這么多年了，但是如果讓我直接解釋一下什么是BFC的時(shí)候，還是感覺(jué)有點(diǎn)不知道怎么準(zhǔn)確的表達(dá)，下面就翻翻文檔，總結(jié)一下，加深一下認(rèn)識(shí)吧。大家也可以關(guān)注我的GitHub后續(xù)的更新 1.BFC...

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

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

0條評(píng)論

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