成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

bfc初探

yzd / 992人閱讀

摘要：初探什么是全稱是塊級格式化上下文，是可視化渲染的一部分，它是塊級盒子的布局發(fā)生，浮動互相交互的部分?？梢园迅冈卦O(shè)置成這樣可以使這個元素包含其浮動子元素。而浮動元素本身是脫離文檔流的，非元素的高度計算是不會把浮動元素計算在內(nèi)。

bfc初探 什么是bfc

bfc全稱是塊級格式化上下文（block formating context），是web可視化css渲染的一部分，它是塊級盒子的布局發(fā)生，浮動互相交互的部分。

我所理解的bfc本質(zhì)上是一個透明的箱子，我們完全看不到這個箱子，但是這個箱子是獨立于外部其他容器而存在的，在這個箱子內(nèi)部有bfc內(nèi)部自己的渲染邏輯。

bfc布局規(guī)則

bfc內(nèi)的元素一次從上往下排列。

bfc垂直方向的距離有margin決定，且相鄰兩個元素寬度會發(fā)生折疊

bfc內(nèi)部的元素的左邊框總是與容器的左邊框重合，浮動也不例外

bfc不會與float box重疊

計算bfc的高度，浮動也會計算在內(nèi)

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

觸發(fā)bfc的條件

根元素或者包含根源的元素

float不為none

dispaly為absolute或者fixed

overflow不為visiable

dispaly為inline-block或者table-cell或者table-caption

bfc的應(yīng)用場景
用bfc包含浮動

如果不創(chuàng)建bfc。浮動元素的父元素的高度會是0，給父元素加一個overflow：hidden?？梢园迅冈卦O(shè)置成bfc,這樣可以使這個元素包含其浮動子元素。

//html


    
p1

    
p2






    
p3

    
p4





//css
.floatdiv1{
    width: 200px;
    overflow: hidden;
    background-color: green;
    border: 1px solid red;
    margin-bottom: 40px;
}
.floatdiv2{
    width: 200px;
    background-color: yellow;
    border: 1px solid blue;
    margin-bottom: 40px;
}
.floatdiv1 p , .floatdiv2 p{
    float: left;
    width: 50px;
    background-color: pink;
    height: 50px;
    margin: 10px;
}
計算bfc的高度的時候，浮動元素也會參與計算。而浮動元素本身是脫離文檔流的，非bfc元素的高度計算是不會把浮動元素計算在內(nèi)。
用bfc阻止文字環(huán)繞。

正常情況下，如果一個塊級元素設(shè)置成了float，那么他的兄弟元素會環(huán)繞其布局。 

//html


    

    




//css
.outer{
    width: 200px;
}
.inner1{
    float: left;
    height: 50px;
    width: 50px;
    background-color: orange;
}
.inner2{
    background-color: cadetblue;
    height: 200px;
    //overflow: hidden;   這里設(shè)置overflow的話就會讓inner成為一個bfc
}

如果inner2設(shè)置了overflow屬性，看到效果是下面的圖

inner會環(huán)繞在浮動元素div周圍，因為同一個bfc中，元素左邊總是觸碰到容器的左邊，即使存在浮動也是如此。如果不想這樣，可以給文字一個overflow：hidden。這樣文字所在的區(qū)域就成了一個bfc,bfc是不會和float元素重疊的。
解決外邊距折疊問題

外邊距折疊的情況：

防止外邊距折疊的問題的方法是給bfc內(nèi)部再寫一個bfc。

//外邊距折疊的情況
//html


    

    

    




//css
.div1{
    width: 200px;
    background-color: blue;
}
.div1 p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
}

解決方案是，把p標(biāo)簽多帶帶寫進一個個的bfc里面，比如在p外邊包一層overflow是hidden的div。這樣的話，兩個p標(biāo)簽不屬于一個bfc，就不會發(fā)生margin折疊的情況。

//html


    

    

    

        

    




//css
.div1{
    width: 200px;
    background-color: blue;
}
p{
    height: 50px;
    margin: 10px 0;
    background-color: orange;
    overflow: hidden;
}
.div2{
    overflow: hidden;
}

//把第三個p標(biāo)簽寫進一個bfc中，這樣的話，第二個p和第三個p就不會發(fā)生折疊，行距是雙倍的行距而不是單倍的。

外邊距的執(zhí)行結(jié)果

如果上下的外邊距都是正的，間隔距離取外邊距的最大值

如果上下的外邊距都是負(fù)的，間隔距離取外邊距絕對值大的

如果上下的外邊距一正一副，間隔距離是相加的和

觸發(fā)外邊距折疊的必要條件

元素必須是塊級盒子，block，list-item table

元素必須是常規(guī)文檔流，且處在同一個bfc中

必須是垂直方向上相鄰的元素，這兩個是觸發(fā)折疊的必要條件

不會觸發(fā)折疊的情況

不處在一個bfc中不會觸發(fā)bfc

另外，浮動元素，position是absolute或者fixed的元素不會出現(xiàn)這種情況，因為不是常規(guī)文檔流

如果一個父元素含有padding或border，那么他與其第一個子元素不會發(fā)生折疊

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112233.html

相關(guān)文章

  • CSS：BFC 最熟悉的陌生人

    摘要：就是神奇之一，它也是最熟悉的陌生人，因為你一不小心就會觸發(fā)它然而你并沒有意識到它正在神奇地發(fā)揮作用。最常見的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個，符合屬于同一個的兩個相鄰元素的會發(fā)生重疊的規(guī)則。 BFC，你也許聽過這個詞，但是你可能不是很有底氣地解釋清楚。寫樣式的時候，往往加了一個樣式或者改了一個屬性，就能達(dá)到你期望的效果，一切都是如此地神奇。BFC就是...

    focusj 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    hellowoody 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    wwolf 評論0 收藏0

  • CSS BFC特性(塊級格式化上下文)

    摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

    岳光 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<