JS每日一題: 如何理解CSS中BFC?

lentoo 發布于2019-08-23 16:58 / 1498人閱讀

摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

20190416期

如何理解CSS中BFC?

定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素交互的區域。

BFC 特性及應用

同一個 BFC 下外邊距會發生折疊

代碼理解



//兩個 div 元素都處于同一個 BFC 容器下 (這里指 body 元素) 所以第一個 div 的下邊距和第二個 div 的上邊距發生了重疊，兩個盒子之間距離只有 100px，而不是 200px

    
    


// 這不是 CSS 的 bug，我們可以理解為一種規范，如果想要避免外邊距的重疊，可以將其放在不同的 BFC 容器中

BFC 可以包含浮動的元素(清除浮動）

我們都知道，浮動的元素會脫離普通文檔流，來看下下面一個例子

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

    


// 下面我們將其清除浮動觸發BFC,將可包裹浮動元素

BFC 可以阻止元素被浮動元素覆蓋

這里有一個經典的css布局試題(兩列自適應布局)就是應用的BFC特性

  left
  right

觸發BFC

下列方式會觸發BFC(摘抄自MDN)

根元素或包含根元素的元素

浮動元素（元素的 float 不是 none）

絕對定位元素（元素的 position 為 absolute 或 fixed）

行內塊元素（元素的 display 為 inline-block）

表格單元格（元素的 display為 table-cell，HTML表格單元格默認為該值）

表格標題（元素的 display 為 table-caption，HTML表格標題默認為該值）

匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）

overflow 值不為 visible 的塊元素

display 值為 flow-root 的元素

contain 值為 layout、content或 strict 的元素

彈性元素（display為 flex 或 inline-flex元素的直接子元素）

網格元素（display為 grid 或 inline-grid 元素的直接子元素）

多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）

column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中

總結

BFC概念很多同學都沒有什么概念，不知道為什么需要清除浮動,margin重疊等等系列騷操作,看完這篇我想應該有個大概了

再來回顧一個BFC的特性

同一個 BFC 下外邊距會發生折疊

BFC 可以阻止元素被浮動元素覆蓋

BFC 可以包含浮動的元素(清除浮動）

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器如何在js中隱藏 js中如何定義字符 js中如何讀取文件 js中如何設置編碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103596.html

JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 評論0 收藏0
JS每日一題：如何理解es6中的Proxy？

20190124問: 如何理解es6中的Proxy？試題解析:對proxy的理解，可能會延伸到vue的雙向綁定 Proxy（代理）定義可以理解為為目標對象架設一層攔截，外界對該對象的訪問，都必須通過這層攔截簡單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

PumpkinDylan 2019-08-02 14:09 評論0 收藏0
JS每日一題：深拷貝與淺拷貝的區別？如何實現一個深拷貝

摘要：期深拷貝與淺拷貝的區別如何實現一個深拷貝在回答這個問題前，我們先來回顧一下中兩大數據類型基本類型引用類型基本類型基本類型就是值類型存放在棧內存中的簡單數據段，數據大小確定，內存空間大小可以分配引用類型引用類型存放在堆內存中的對象，變量實際保 20190311期深拷貝與淺拷貝的區別？如何實現一個深拷貝在回答這個問題前，我們先來回顧一下ＪＳ中兩大數據類型基本類型 Undefined...

MiracleWong 2019-08-26 13:37 評論0 收藏0
JS每日一題：函數式編程中代碼組合(compose)如何理解?

摘要：期函數式編程中代碼組合如何理解定義顧名思義，在函數式編程中，就是將幾個有特點的函數拼湊在一起，讓它們結合，產生一個嶄新的函數代碼理解一個將小寫轉大寫的函數一個在字符后加的函數將兩個函數組合起來這里假設我們實現了每日一題每日一題顯示結果里上面 20190315期函數式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數式編程中，Compose就是將幾個有特點的函數拼湊在...

Kaede 2019-08-23 16:08 評論0 收藏0
JS每日一題：函數式編程中純函數如何理解?

摘要：期函數式編程中純函數如何理解概念不依賴執行的上下文，也不影響上下文的變量，輸出只由輸入決定代碼理解一下綜上，非純函數輸入依賴外部變量綜上，非純函數輸出改變外部變量綜上純函數輸出輸入不影響外部變量純函數的好處相信大家發現了，無論是概念還是代碼 20190313期函數式編程中純函數如何理解? 概念: 不依賴執行的上下文，也不影響上下文的變量，輸出只由輸入決定代碼理解一下 // 綜上，非...

Zoom 2019-08-23 15:55 評論0 收藏0