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

資訊專欄INFORMATION COLUMN

CSS：BFC 最熟悉的陌生人

focusj / 3056人閱讀

摘要：就是神奇之一，它也是最熟悉的陌生人，因為你一不小心就會觸發(fā)它然而你并沒有意識到它正在神奇地發(fā)揮作用。最常見的有和，中還增加了和，這里就不深入研究了。其根本原理就是它們處于同一個，符合屬于同一個的兩個相鄰元素的會發(fā)生重疊的規(guī)則。

BFC，你也許聽過這個詞，但是你可能不是很有底氣地解釋清楚。
寫樣式的時候，往往加了一個樣式或者改了一個屬性，就能達(dá)到你期望的效果，一切都是如此地神奇。
BFC就是神奇之一，它也是最熟悉的陌生人，因為你一不小心就會觸發(fā)它然而你并沒有意識到它正在神奇地發(fā)揮作用。

一、初探BFC

我們先看看CSS布局的基本單位：

block-level box: display 屬性為 block, list-item, table 的元素，會生成 block-level box，并且參與 block formatting context

inline-level box: display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box，并且參與 inline formatting context

那這個formatting context又是什么玩意兒？

它是W3C CSS2.1規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。也就是說我們平時在布局的時候，它默默地提供了一個環(huán)境，使得HTML元素在這個環(huán)境中按照一定規(guī)則進(jìn)行布局。

最常見的formatting context有Block Formatting Context(BFC)和Inline Formatting Context(IFC)，CSS3中還增加了GridLayout Formatting Context(GFC)和Flex Formatting Context(FFC)，這里就不深入研究了。

BFC定義：它是一個獨(dú)立的渲染區(qū)域，只有block-level box參與，其中的元素按照規(guī)定的渲染規(guī)則進(jìn)行布局，并且這個區(qū)域與外部毫不相干。

二、BFC的布局規(guī)則與觸發(fā)規(guī)則

剛才我們說到BFC中的元素有一套規(guī)定的布局規(guī)則：

內(nèi)部的元素會在垂直方向一個接一個地放置

元素垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰元素的margin會發(fā)生重疊

每個元素的左外邊距與包含塊的左邊界相接觸(對于從左往右，否則相反)，即使存在浮動也是如此

BFC的區(qū)域不會與float元素重疊

計算BFC的高度時，浮動元素也參與計算

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

剛才我們又提到BFC是一塊渲染區(qū)域，那這塊渲染區(qū)域到底在哪，它又是有多大，這些由生成BFC的元素來決定，CSS2.1中規(guī)定滿足下列CSS聲明的元素便會生成BFC（觸發(fā)規(guī)則）：

根元素

float的值不為none

overflow的值不為visible

position的值為absolute或fixed

display的值為inline-block, table-cell, table-caption, flex, inline-flex
注：display: table也認(rèn)為可以生成BFC，主要原因是table會默認(rèn)生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC

上面這些CSS聲明的元素生成了BFC，而它們本身并不是BFC，這一點(diǎn)需要區(qū)分。

三、BFC的應(yīng)用

說了這么多有用沒用的，我們平時布局的時候到底怎么應(yīng)用呢：

1.防止垂直margin重疊

有點(diǎn)布局經(jīng)驗的朋友都知道m(xù)argin collapse，也就是相鄰的垂直元素同時設(shè)置了margin后，實(shí)際margin值會塌陷到其中較大的那個值。其根本原理就是它們處于同一個BFC，符合“屬于同一個BFC的兩個相鄰元素的margin會發(fā)生重疊”的規(guī)則。

我們可以在其中一個元素外面包裹一層容器，并觸發(fā)該容器生成一個BFC。那么兩個元素便屬于不同的BFC，就不會發(fā)生margin重疊了：




    
我屬于一個BFC

    

        
我屬于另一個BFC

如果是我的話會直接設(shè)置200px，或者只設(shè)置其中一個元素的margin（懶可以偷，但原理需知道）

2.防止浮動子元素高度塌陷




    

        
float: left

        
float: left

如果我們將.parent元素的overflow: hidden去掉，那么.parent元素就獲取不到浮動元素的高度了。但是加上overflow屬性后觸發(fā)了BFC，計算BFC的高度時，浮動元素也參與了計算。

3.防止文字（或其他元素）環(huán)繞




    

        
float: left

        
我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞我只是文字但我不會環(huán)繞

正常情況下，如果一個塊級元素設(shè)置成了float，那么他的兄弟元素會環(huán)繞其布局。這里我們給.text加上overflow，文字所在的區(qū)域就產(chǎn)生了BFC，元素的左邊總是觸碰到容器的左邊，即使存在浮動也是如此。

這里舉例了幾個比較經(jīng)典的應(yīng)用，我們在以后的布局中也可以慢慢探索其中的奧秘之處，做一個能寫一手好樣式還能懂原理的前端er。

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

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

相關(guān)文章

  • 前端必懂之熟悉又陌生的BFC

    寫在最前：BFC看起來是個很陌生的概念但它卻時時發(fā)生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應(yīng)布局？都和BFC有這密不可分的關(guān)系，下面走進(jìn)切圖妞的世界，分分鐘搞定BFC！ 一、什么是BFC？ BFC概念 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素...

    Dongjie_Liu 評論0 收藏0

  • 前端必懂之熟悉又陌生的BFC

    寫在最前：BFC看起來是個很陌生的概念但它卻時時發(fā)生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應(yīng)布局？都和BFC有這密不可分的關(guān)系，下面走進(jìn)切圖妞的世界，分分鐘搞定BFC！ 一、什么是BFC？ BFC概念 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素...

    philadelphia 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<