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

資訊專欄INFORMATION COLUMN

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

lentoo / 1557人閱讀

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

20190416期

如何理解CSS中BFC?

定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。
BFC 特性及應(yīng)用

同一個 BFC 下外邊距會發(fā)生折疊

代碼理解



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

    

    



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

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

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

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


    




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

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

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

  
left

  
right
觸發(fā)BFC

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

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

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

絕對定位元素（元素的 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 的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中

總結(jié)

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

再來回顧一個BFC的特性

同一個 BFC 下外邊距會發(fā)生折疊

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

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

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nè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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    tinysun1234 評論0 收藏0

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

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

    PumpkinDylan 評論0 收藏0

  • JS每日一題：深拷貝與淺拷貝的區(qū)別？如何實(shí)現(xiàn)一個深拷貝

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

    MiracleWong 評論0 收藏0

  • JS每日一題：函數(shù)式編程中代碼組合(compose)如何理解?

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

    Kaede 評論0 收藏0

  • JS每日一題：函數(shù)式編程中純函數(shù)如何理解?

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

    Zoom 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<