資訊專欄INFORMATION COLUMN
摘要：期如何理解中定義塊格式化上下文，是頁(yè)面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
20190416期
如何理解CSS中BFC?
定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁(yè)面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。
同一個(gè) BFC 下外邊距會(huì)發(fā)生折疊
代碼理解
//兩個(gè) div 元素都處于同一個(gè) BFC 容器下 (這里指 body 元素) 所以第一個(gè) div 的下邊距和第二個(gè) div 的上邊距發(fā)生了重疊，兩個(gè)盒子之間距離只有 100px，而不是 200px
// 這不是 CSS 的 bug，我們可以理解為一種規(guī)范，如果想要避免外邊距的重疊，可以將其放在不同的 BFC 容器中
BFC 可以包含浮動(dòng)的元素(清除浮動(dòng)）
我們都知道，浮動(dòng)的元素會(huì)脫離普通文檔流，來(lái)看下下面一個(gè)例子
// 由于容器內(nèi)元素浮動(dòng)，脫離了文檔流，所以容器只剩下 2px 的邊距高度。如果使觸發(fā)容器的 BFC，那么容器將會(huì)包裹著浮動(dòng)元素// 下面我們將其清除浮動(dòng)觸發(fā)BFC,將可包裹浮動(dòng)元素
BFC 可以阻止元素被浮動(dòng)元素覆蓋
這里有一個(gè)經(jīng)典的css布局試題(兩列自適應(yīng)布局)就是應(yīng)用的BFC特性
觸發(fā)BFCleftright
下列方式會(huì)觸發(fā)BFC(摘抄自MDN)
根元素或包含根元素的元素
浮動(dòng)元素（元素的 float 不是 none）
絕對(duì)定位元素（元素的 position 為 absolute 或 fixed）
行內(nèi)塊元素（元素的 display 為 inline-block）
表格單元格（元素的 display為 table-cell，HTML表格單元格默認(rèn)為該值）
表格標(biāo)題（元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值）
匿名表格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認(rèn)屬性）或 inline-table）
overflow 值不為 visible 的塊元素
display 值為 flow-root 的元素
contain 值為 layout、content或 strict 的元素
彈性元素（display為 flex 或 inline-flex元素的直接子元素）
網(wǎng)格元素（display為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會(huì)創(chuàng)建一個(gè)新的BFC，即使該元素沒有包裹在一個(gè)多列容器中
總結(jié)BFC概念很多同學(xué)都沒有什么概念，不知道為什么需要清除浮動(dòng),margin重疊等等系列騷操作,看完這篇我想應(yīng)該有個(gè)大概了
再來(lái)回顧一個(gè)BFC的特性
同一個(gè) BFC 下外邊距會(huì)發(fā)生折疊
BFC 可以阻止元素被浮動(dòng)元素覆蓋
BFC 可以包含浮動(dòng)的元素(清除浮動(dòng)）
關(guān)于JS每日一題JS每日一題可以看成是一個(gè)語(yǔ)音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語(yǔ)音形式來(lái)完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案
注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路
點(diǎn)擊加入答題
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103596.html
20190124問: 如何理解es6中的Proxy？ 試題解析:對(duì)proxy的理解，可能會(huì)延伸到vue的雙向綁定 Proxy（代理） 定義 可以理解為為目標(biāo)對(duì)象架設(shè)一層攔截，外界對(duì)該對(duì)象的訪問，都必須通過這層攔截 簡(jiǎn)單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...
20190124問: 如何理解es6中的Proxy？ 試題解析:對(duì)proxy的理解，可能會(huì)延伸到vue的雙向綁定 Proxy（代理） 定義 可以理解為為目標(biāo)對(duì)象架設(shè)一層攔截，外界對(duì)該對(duì)象的訪問，都必須通過這層攔截 簡(jiǎn)單示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...
摘要：期深拷貝與淺拷貝的區(qū)別如何實(shí)現(xiàn)一個(gè)深拷貝在回答這個(gè)問題前，我們先來(lái)回顧一下中兩大數(shù)據(jù)類型基本類型引用類型基本類型基本類型就是值類型存放在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段，數(shù)據(jù)大小確定，內(nèi)存空間大小可以分配引用類型引用類型存放在堆內(nèi)存中的對(duì)象，變量實(shí)際保 20190311期 深拷貝與淺拷貝的區(qū)別？如何實(shí)現(xiàn)一個(gè)深拷貝 在回答這個(gè)問題前，我們先來(lái)回顧一下ＪＳ中兩大數(shù)據(jù)類型 基本類型 Undefined...
摘要：期函數(shù)式編程中代碼組合如何理解定義顧名思義，在函數(shù)式編程中，就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在一起，讓它們結(jié)合，產(chǎn)生一個(gè)嶄新的函數(shù)代碼理解一個(gè)將小寫轉(zhuǎn)大寫的函數(shù)一個(gè)在字符后加的函數(shù)將兩個(gè)函數(shù)組合起來(lái)這里假設(shè)我們實(shí)現(xiàn)了每日一題每日一題顯示結(jié)果里上面 20190315期 函數(shù)式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數(shù)式編程中，Compose就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在...
摘要：期函數(shù)式編程中純函數(shù)如何理解概念不依賴執(zhí)行的上下文，也不影響上下文的變量，輸出只由輸入決定代碼理解一下綜上，非純函數(shù)輸入依賴外部變量綜上，非純函數(shù)輸出改變外部變量綜上純函數(shù)輸出輸入不影響外部變量純函數(shù)的好處相信大家發(fā)現(xiàn)了，無(wú)論是概念還是代碼 20190313期 函數(shù)式編程中純函數(shù)如何理解? 概念: 不依賴執(zhí)行的上下文，也不影響上下文的變量，輸出只由輸入決定 代碼理解一下 // 綜上，非...
閱讀 790·2023-04-25 17:33
閱讀 3645·2021-07-29 14:49
閱讀 2491·2019-08-30 15:53
閱讀 3445·2019-08-29 16:27
閱讀 2013·2019-08-29 16:11
閱讀 1040·2019-08-29 14:17
閱讀 2451·2019-08-29 13:47
閱讀 2028·2019-08-29 13:28
