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

資訊專欄INFORMATION COLUMN

bfc初探

yzd / 902人閱讀

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

bfc初探 什么是bfc

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

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

bfc布局規(guī)則

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

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

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

bfc不會(huì)與float box重疊

計(jì)算bfc的高度，浮動(dòng)也會(huì)計(jì)算在內(nèi)

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

觸發(fā)bfc的條件

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

float不為none

dispaly為absolute或者fixed

overflow不為visiable

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

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

如果不創(chuàng)建bfc。浮動(dòng)元素的父元素的高度會(huì)是0，給父元素加一個(gè)overflow：hidden。可以把父元素設(shè)置成bfc,這樣可以使這個(gè)元素包含其浮動(dòng)子元素。

//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;
}
計(jì)算bfc的高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算。而浮動(dòng)元素本身是脫離文檔流的，非bfc元素的高度計(jì)算是不會(huì)把浮動(dòng)元素計(jì)算在內(nèi)。
用bfc阻止文字環(huán)繞。

正常情況下，如果一個(gè)塊級(jí)元素設(shè)置成了float，那么他的兄弟元素會(huì)環(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的話就會(huì)讓inner成為一個(gè)bfc
}

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

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

外邊距折疊的情況：

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

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


    

    

    




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

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

//html


    

    

    

        

    




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

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

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

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

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

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

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

元素必須是塊級(jí)盒子，block，list-item table

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

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

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

不處在一個(gè)bfc中不會(huì)觸發(fā)bfc

另外，浮動(dòng)元素，position是absolute或者fixed的元素不會(huì)出現(xiàn)這種情況，因?yàn)椴皇浅Ｒ?guī)文檔流

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

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

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

相關(guān)文章

  • CSS：BFC 最熟悉的陌生人

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

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

  • 2017文章總結(jié)

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

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

  • 2017文章總結(jié)

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

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

  • 2017文章總結(jié)

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

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

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

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

    岳光 評(píng)論0 收藏0

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

0條評(píng)論

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