成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺析BFC布局的概念以及作用

荊兆峰 / 1910人閱讀

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級(jí)格式化上下文。是的首字母縮寫(xiě)，直譯過(guò)來(lái)是格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。

BFC的概念以及作用

BFC的定義：

(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

我們常說(shuō)的文檔流其實(shí)分為==定位流、浮動(dòng)流和普通流==三種。而普通流其實(shí)就是指BFC中的FC。
FC是formatting context的首字母縮寫(xiě)，直譯過(guò)來(lái)是格式化上下文，它是頁(yè)面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關(guān)系和作用。

通俗一點(diǎn)的方式解釋:

BFC 可以簡(jiǎn)單的理解為某個(gè)元素的一個(gè) CSS 屬性，只不過(guò)這個(gè)屬性不能被開(kāi)發(fā)者顯式的修改，擁有這個(gè)屬性的元素對(duì)內(nèi)部元素和外部元素會(huì)表現(xiàn)出一些特性，這就是BFC。

BFC的觸發(fā)條件

==滿足下列條件之一就可觸發(fā)BFC==

  • 【1】根元素，即HTML元素
  • 【2】float的值不為none
  • 【3】overflow的值不為visible
  • 【4】display的值為inline-block、table-cell、table-caption

  • 【5】position的值為absolute或fixed

    BFC布局規(guī)則：

    • 1.內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
  • 2.Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
  • 3.每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
  • 4.BFC的區(qū)域不會(huì)與float box重疊。
  • 5.BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

  • 6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

BFC布局規(guī)則1：內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

我們平常說(shuō)的盒子是由margin、border、padding、content組成的，實(shí)際上每種類型的四條邊定義了一個(gè)盒子，分別是分別是content box、padding box、border box、margin box，這四種類型的盒子一直存在，即使他們的值為0.決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。

BFC布局規(guī)則2：Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box

BFC布局規(guī)則3：每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。


    

    //給這兩個(gè)子div加浮動(dòng)，浮動(dòng)的結(jié)果，如果沒(méi)有清除浮動(dòng)的話，父div不會(huì)將下面兩個(gè)div包裹，但還是在父div的范圍之內(nèi)。

解析：給這兩個(gè)子div加浮動(dòng)，浮動(dòng)的結(jié)果，如果沒(méi)有清除浮動(dòng)的話，父div不會(huì)將下面兩個(gè)div包裹，但還是在父div的范圍之內(nèi)，左浮是子div的左邊接觸父div的borderbox的左邊，右浮是子div接觸父div的borderbox右邊，除非設(shè)置margin來(lái)?yè)伍_(kāi)距離，否則一直是這個(gè)規(guī)則。

BFC布局規(guī)則4：BFC的區(qū)域不會(huì)與float box重疊：




    




 .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
  .main {
            height: 200px;
            overflow: hidden;//觸發(fā)main盒子的BFC
            background: #fcc;
        }
  .text{
            width: 500px;
    }

上面aside盒子有一個(gè)浮動(dòng)屬性，覆蓋了main盒子的內(nèi)容，main盒子沒(méi)有清除aside盒子的浮動(dòng)。只做了一個(gè)動(dòng)作，就是觸發(fā)自身的BFC，然后就不再被aside盒子覆蓋了。所以：BFC的區(qū)域不會(huì)與float box重疊。

BFC有哪些作用：

  • 1.自適應(yīng)兩欄布局
  • 2.可以阻止元素被浮動(dòng)元素覆蓋
  • 3.可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)

  • 4.分屬于不同的BFC時(shí)可以阻止margin重疊

    BFC作用1：自適應(yīng)兩欄布局

    還是上面的代碼，此時(shí)BFC的區(qū)域不會(huì)與float box重疊，因此會(huì)根據(jù)包含塊（父div）的寬度，和aside的寬度，自適應(yīng)寬度。

    BFC 與 Layout

    IE 作為瀏覽器中的奇葩，當(dāng)然不可能按部就班的支持 BFC 標(biāo)準(zhǔn)，于是乎 IE 中有了 Layout 這個(gè)東西。Layout 和 BFC 基本是等價(jià)的，為了處理 IE 的兼容性，在需要觸發(fā) BFC 時(shí)，我們除了需要用觸發(fā)條件中的 CSS 屬性來(lái)觸發(fā) BFC，還需要針對(duì) IE 瀏覽器使用 zoom: 1 來(lái)觸發(fā) IE 瀏覽器的 Layout。

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC作用3：可以包含浮動(dòng)元素——清除內(nèi)部浮動(dòng)

給父divparent加上 overflow: hidden;
清除浮動(dòng)原理：觸發(fā)父div的BFC屬性，使下面的子div都處在父div的同一個(gè)BFC區(qū)域之內(nèi)，此時(shí)已成功清除浮動(dòng).
還可以向同一個(gè)方向浮動(dòng)來(lái)達(dá)到清除浮動(dòng)的目的，清除浮動(dòng)的原理是兩個(gè)div都位于同一個(gè)浮動(dòng)的BFC區(qū)域之中

BFC的作用4：阻止margin重疊:

當(dāng)兩個(gè)相鄰塊級(jí)子元素分屬于不同的BFC時(shí)可以阻止margin重疊
操作方法：給其中一個(gè)div外面包一個(gè)div，然后通過(guò)觸發(fā)外面這個(gè)div的BFC，就可以阻止這兩個(gè)div的margin重疊



    




 .aside {
            margin-bottom: 100px;//margin屬性
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin屬性
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一個(gè)div，通過(guò)改變此div的屬性使兩個(gè)盒子分屬于兩個(gè)不同的BFC，以此來(lái)阻止margin重疊*/
            overflow: hidden;//此時(shí)已經(jīng)觸發(fā)了BFC屬性。
        }

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

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

相關(guān)文章

  • BFC與自適應(yīng)淺析

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。的區(qū)域不會(huì)與重疊。也就是說(shuō)只要父容器形成就可以，觸發(fā)方式見(jiàn)上清除浮動(dòng)比較好的方法以上用，用更好的方法自適應(yīng)布局觸發(fā)自適應(yīng)屬性對(duì)比參考資料張?chǎng)涡窭蠋煹牟┛? 本文是從之前的csdn上的亂七八糟的筆記整理過(guò)來(lái)的 概念 　　Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何...

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

  • 淺析BFC

    摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么...

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

  • 淺析BFC

    摘要：原文鏈接說(shuō)起其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理 原文鏈接: Fyerls Blog 說(shuō)起 BFC 其實(shí)有點(diǎn)像閉包在大多數(shù)人印象中的感覺(jué)，平時(shí)都用過(guò)，但在不了解定義的情況下大多數(shù)人卻又不知道這就是 BFC。之所以會(huì)想了解下什么...

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

  • 一篇文章帶拿下盒模型BFC渲染機(jī)制

    摘要：它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素，但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過(guò)的相關(guān) 盒模型BFC 文章中，對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對(duì)原文進(jìn)行刪改）,會(huì)不斷豐富提煉總結(jié)更新。 一.常見(jiàn)定位方案 在講 BFC 之前，我們先來(lái)了解一下常見(jiàn)的...

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

  • BFC原理詳解

    摘要：最常見(jiàn)的有簡(jiǎn)稱和簡(jiǎn)稱。可以把它理解成是一個(gè)獨(dú)立的容器，并且這個(gè)容器的里的布局，與這個(gè)容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.BFC是什么 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

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

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

0條評(píng)論

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