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

資訊專欄INFORMATION COLUMN

BFC：塊級格式上下文詳解

Shihira / 1302人閱讀

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。

1.BFC簡要定義

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。

2.BFC創(chuàng)建方式

根元素或其它包含它的元素；

浮動 (元素的float不為none)；

絕對定位元素 (元素的position為absolute或fixed)；

行內(nèi)塊inline-blocks(元素的 display: inline-block)；

表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；

overflow的值不為visible的元素；

彈性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC內(nèi)部特性

內(nèi)部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規(guī)流）；

處于同一個BFC中的元素相互影響，可能會發(fā)生margin collapse；但不同BFC可以阻止margin collapse

每個元素的margin box的左邊，與容器塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；

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

計算BFC的高度時，考慮BFC所包含的所有元素，連浮動元素也參與計算；

浮動盒區(qū)域不疊加到BFC上；

4.BFC應用實例 1.BFC清除浮動

將父元素設(shè)置一個能讓其變?yōu)锽FC區(qū)域的屬性，不如overflow：auto





    
    Title
    




    
one

    
two
2.BFC處理margin collapse 
在CSS中，兩個或多個毗鄰的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外邊距會發(fā)生疊加，這種形成的外邊距稱之為外邊距疊加。這里講解父子元素，兄弟元素同理。




    
    Title
    




    
aaaaaaaaaaaaaa

    
bbbbbbbbbbbbbb

BFC改造后

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

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

相關(guān)文章

  • BFC：塊級格式上下文詳解

    摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。 2.B...

    wyk1184 評論0 收藏0

  • BFC：塊級格式上下文詳解

    摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。 1.BFC簡要定義 BFC(Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區(qū)域，它規(guī)定了內(nèi)部如何布局，是決定塊盒子的布局及浮動相互影響范圍的一個區(qū)域，并且與這個區(qū)域外部毫不相干。 2.B...

    HelKyle 評論0 收藏0

  • BFC原理詳解

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

    ziwenxie 評論0 收藏0

  • 想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

    摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據(jù)原來位置絕對定位脫離普通流，不占據(jù)空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。 視覺格式化模型 頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規(guī)則，將...

    Edison 評論0 收藏0

發(fā)表評論

0條評論

Shihira

男|高級講師

TA的文章

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