亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

css 塊級(jí)格式化上下文（BFC）

J4ck_Chan / 587人閱讀

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

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

根元素

float的值不為none。

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

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

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

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

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

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

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

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

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

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

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

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

代碼如下：




    
    外邊距折疊
    
    


    

    
        
上下100margin

        
        
上下100margin

效果圖：

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

解決方法：

放在不同的BFC下

代碼如下：




    
    外邊距折疊
    
    


    

        

            
上下100margin

        

        

            
上下100margin

效果圖：

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

2、BFC可以包含浮動(dòng)的元素（清除浮動(dòng)）

代碼如下：




    
    高度塌陷
    
    


    


            
浮動(dòng)

效果圖：

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

代碼如下：




    
    高度塌陷
    
    


    


            
浮動(dòng)
3、侵占浮動(dòng)元素的問(wèn)題

代碼如下：




    
    高度塌陷
    
    


    


            
浮動(dòng)

    

            
        
            

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

效果圖：

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




    
    高度塌陷
    
    


    


            
浮動(dòng)

    
    
        

            
        
            

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

效果圖：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113522.html

相關(guān)文章

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

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(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 評(píng)論0 收藏0

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

    摘要：盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(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 評(píng)論0 收藏0

  • BFC原理詳解

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

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

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

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

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

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

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

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

  • CSS中重要的BFC

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<