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

資訊專欄INFORMATION COLUMN

BFC：塊級(jí)格式上下文詳解

HelKyle / 1824人閱讀

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

1.BFC簡(jiǎn)要定義

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

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

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

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

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

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

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

overflow的值不為visible的元素；

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

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

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

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

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

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

計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有元素，連浮動(dòng)元素也參與計(jì)算；

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

4.BFC應(yīng)用實(shí)例 1.BFC清除浮動(dòng)

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





    
    Title
    




    
one

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




    
    Title
    




    
aaaaaaaaaaaaaa

    
bbbbbbbbbbbbbb

BFC改造后

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

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

相關(guān)文章

  • BFC：塊級(jí)格式上下文詳解

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

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

  • BFC：塊級(jí)格式上下文詳解

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

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

  • BFC原理詳解

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<