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

資訊專欄INFORMATION COLUMN

css 塊級格式化上下文（BFC）

weij / 3008人閱讀

摘要：一塊級格式化上下文什么是塊級格式化上下文，塊級格式化上下文就是一個(gè)塊級元素的渲染顯示規(guī)則可以把理解為一個(gè)封閉的大箱子，，容器里面的子元素不會影響到外面的元素觸發(fā)的條件如下根元素的值不為。

一、塊級格式化上下文（BFC） 1、什么是塊級格式化上下文？ 
    Block Formatting Contexts (BFC，塊級格式化上下文)就是一個(gè)塊級元素 的渲染顯示規(guī)則
  （可以把 BFC 理解為一個(gè)封閉的大箱子，，容器里面的子元素不會影響到外面的元素）
2、觸發(fā)BFC的條件如下：

根元素

float的值不為none。

overflow 除了 visible 以外的值（hidden，auto，scroll）

display的值為table-cell, table-caption, inline-block中的任何一個(gè)。

絕對定位元素：position (absolute、fixed)

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

3、BFC 的布局規(guī)則：

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

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

屬于同一個(gè)BFC的 兩個(gè)相鄰Box的 上下margin會發(fā)生重疊 ；

計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算

每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；

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

4、BFC特性
1.同一BFC下外邊距會發(fā)生折疊：

代碼如下：




    
    外邊距折疊
    
    


    

    
        
上下100margin

        
        
上下100margin

效果圖：

第一個(gè)div的下邊距和第二個(gè)div的上邊距發(fā)聲了重疊，所以兩個(gè)盒子之間距離只有100px，而不是200px。

解決方法：

放在不同的BFC下

代碼如下：




    
    外邊距折疊
    
    


    

        

            
上下100margin

        

        

            
上下100margin

效果圖：

這次我們可以清晰的看清兩個(gè)中間是200px；并沒用重疊。

2、BFC可以包含浮動的元素（清除浮動）

代碼如下：




    
    高度塌陷
    
    


    


            
浮動

效果圖：

由于容器內(nèi)元素浮動，脫離了文檔流，所以容器只剩下 2px 的邊距高度。如果使觸發(fā)容器的 BFC，那么容器將會包裹著浮動元素。

代碼如下：




    
    高度塌陷
    
    


    


            
浮動
3、侵占浮動元素的問題

代碼如下：




    
    高度塌陷
    
    


    


            
浮動

    

            
        
            

            
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！

效果圖：

解決方法：
通過觸發(fā)btm2的BFC解決
代碼如下：




    
    高度塌陷
    
    


    


            
浮動

    
    
        

            
        
            

            
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！
            歡迎大家觀看！

效果圖：

持續(xù)更新，歡迎大家指教！

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

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

相關(guān)文章

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

    verano 評論0 收藏0

  • 十分鐘復(fù)習(xí)CSS盒模型與BFC

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中，每...

    suxier 評論0 收藏0

  • BFC原理詳解

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

    ziwenxie 評論0 收藏0

  • 前端進(jìn)階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

    摘要：官方說法就是它規(guī)定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時(shí)又是的包含塊，不是絕對的。因此稱為匿名盒子。行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時(shí)會參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個(gè)值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 評論0 收藏0

  • CSS > 譯文：理解CSS中的塊級格式化上下文

    摘要：譯文理解中的塊級格式化上下文塊級格式化上下文是網(wǎng)頁視覺渲染的一部分，并用于決定塊盒子的布局。根據(jù)所言浮動絕對定位元素為或行內(nèi)塊元素表格單元格表格標(biāo)題以及屬性值不為的元素除了該值被傳播到視點(diǎn)的情況將創(chuàng)建一個(gè)新的塊級格式化上下文。 CSS > 譯文：理解CSS中的塊級格式化上下文 Original Author: Ritesh Kumar Original Article: http:/...

    LancerComet 評論0 收藏0

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...

    plus2047 評論0 收藏0

發(fā)表評論

0條評論

weij

男|高級講師

TA的文章

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