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

資訊專欄INFORMATION COLUMN

BFC：塊級格式上下文詳解

HelKyle / 1763人閱讀

摘要：簡要定義直譯為塊級格式化上下文。它是一個獨立的渲染區(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應(yīng)用實例 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://specialneedsforspecialkids.com/yun/114598.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...

    Shihira 評論0 收藏0

  • BFC原理詳解

    摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應(yīng)布局布局 一.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條評論

HelKyle

男|高級講師

TA的文章

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