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

資訊專欄INFORMATION COLUMN

加深理解BFC

yanwei / 3390人閱讀

摘要：相關(guān)定義是規(guī)定中的一個概念。最常見的有簡稱和簡稱。中只有和，中還增加了和。布局規(guī)則內(nèi)部的會在垂直方向，一個接一個地放置垂直方向地距離由決定。計算的高度時，浮動元素頁參與計算。我們的做法是包一層標簽，并轉(zhuǎn)化成。

1、相關(guān)定義 1.1 Formatting context

Formatting context是W3C CSS2.1規(guī)定中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素如何定位，以及和其他元素的關(guān)系和相互作用。最常見的Formatting context有Block formatting context（簡稱BFC）和Inline formatting context（簡稱IFC）。
css2.1中只有BFC和IFC，css3中還增加了GFC和FFC。

1.2 BFC定義

BFC(Block formatting context)直譯為“塊級格式化上下文”。它是獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。

1.3 BFC布局規(guī)則：

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

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

每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反）。即便存在浮動也是如此。

BFC的區(qū)域不會與float box重疊。

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

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

2、作用 2.1 可生成BFC的元素

根元素html；

float屬性不為none；

position為absolute或fixed；

display為inline-block， table-cell，table-caption，flex， inline-flex；

overflow不為visible；

2.2 場景一：對于兩欄或三欄浮動自適應(yīng)布局，包含塊邊接觸問題。 



    
我是左邊區(qū)域塊
        
    
我是右邊區(qū)域塊

    
我是中間區(qū)域塊

中間自適應(yīng)欄邊界會延展左右浮動區(qū)域

此時需要把中間欄變成BFC

.left-center-right.float .center {
    background-color: rgb(13, 218, 233);
    height: 200px;
    overflow: hidden;
}

2.3 場景二：子級元素有浮動，父級元素塌陷問題 



    
我是左邊區(qū)域塊

    
我是右邊區(qū)域塊

此時需要將父級元素變成BFC

.all-children-float {
    position: absolute;
}

2.3 場景三：垂直方向margin出現(xiàn)重合 



    
我是區(qū)域塊1

    
我是區(qū)域塊2


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

我們的做法是包一層標簽，并轉(zhuǎn)化成BFC。

.wrapper1 {
    overflow: hidden;
}



    

        
我是區(qū)域塊1

    
        
    
我是區(qū)域塊2

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

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

相關(guān)文章

  • BFC深入理解

    摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內(nèi)層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。 一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

    yiliang 評論0 收藏0

  • BFC深入理解

    摘要：一直都知道可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個屬性便會避開計算內(nèi)層元素的高度。但如果高度有具體的值時，高度超過時還是會被裁剪。 一直都知道overflow可以清除浮動，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個東西，寫這篇文章一是為了加深記憶，二是為了加深理解。 ...

    王陸寬 評論0 收藏0

  • margin合并、塌陷，清除浮動

    摘要：合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

    Alliot 評論0 收藏0

  • margin合并、塌陷，清除浮動

    摘要：合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。 這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知...

    MadPecker 評論0 收藏0

  • 側(cè)邊欄的固定與自適應(yīng)原來是這樣實現(xiàn)的（持續(xù)更新）

    摘要：規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認處理和行高沒關(guān)系，不過這只是瀏覽器現(xiàn)在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設(shè)置。的值除了也是可以為數(shù)值的。的區(qū)域不會與重疊。 摘要 剛看了一個關(guān)于前端面試題的帖子，有些css題雖然能答出來，但出于學(xué)習(xí)的目的與好奇心，覺得有必要加深一下對功能實現(xiàn)原理的了解。整理出一份文檔，共勉。 正文 行內(nèi)元素的高 ...

    sarva 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<