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

資訊專欄INFORMATION COLUMN

從例子來看BFC

EdwardUp / 1634人閱讀

摘要：實(shí)例從實(shí)例上可以看到，元素的外邊距會(huì)觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動(dòng)元素發(fā)生了重疊。實(shí)例此時(shí)發(fā)現(xiàn)高度會(huì)重新被撐開，所以計(jì)算的高度浮動(dòng)元素也會(huì)參與計(jì)算

BFC

首先BFC的英文全稱Block Format Context，也就是塊級(jí)格式化上下文。

BFC特性

首先，我們大家都知道的BFC特性：

內(nèi)部的元素會(huì)在垂直方向，從頂部一個(gè)接一個(gè)的放置

Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此；

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

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

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

創(chuàng)建BFC方法

下面也是大家都熟悉的創(chuàng)建BFC的方法

根元素

float不為none

overflow不為visible

display為table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一個(gè)為專門創(chuàng)建BFC的屬性

position為absolute,fixed

實(shí)例 實(shí)例1

從實(shí)例1可以看到特性1，內(nèi)部元素會(huì)從頂部一個(gè)接一個(gè)的放置，并且屬于同一個(gè)BFC的兩個(gè)相鄰的margin會(huì)發(fā)生重疊。如何解決邊距重疊的問題呢？此時(shí)我們需要給元素套上一個(gè)父元素，將父元素變成BFC。

實(shí)例

這樣便可以解決邊距重疊問題。

實(shí)例2

從實(shí)例2上可以看到，元素的外邊距會(huì)觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動(dòng)元素發(fā)生了重疊。

當(dāng)右面元素觸發(fā)BFC的時(shí)候，不會(huì)與左面元素發(fā)生重疊，見實(shí)例

實(shí)例3

當(dāng)兩個(gè)子元素都進(jìn)行浮動(dòng)時(shí)，此時(shí)父元素的高度會(huì)消失，第六個(gè)特性，計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算，此時(shí)我們觸發(fā)父元素的BFC。實(shí)例

此時(shí)發(fā)現(xiàn)高度會(huì)重新被撐開，所以計(jì)算BFC的高度浮動(dòng)元素也會(huì)參與計(jì)算

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

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

相關(guān)文章

  • 從例子來看BFC

    摘要：實(shí)例從實(shí)例上可以看到，元素的外邊距會(huì)觸碰到包含塊容器的外邊框，也就是元素左邊與容器左邊相接觸，與浮動(dòng)元素發(fā)生了重疊。實(shí)例此時(shí)發(fā)現(xiàn)高度會(huì)重新被撐開，所以計(jì)算的高度浮動(dòng)元素也會(huì)參與計(jì)算 BFC 首先BFC的英文全稱Block Format Context，也就是塊級(jí)格式化上下文。 BFC特性 首先，我們大家都知道的BFC特性： 內(nèi)部的元素會(huì)在垂直方向，從頂部一個(gè)接一個(gè)的放置 Box垂直方...

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

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

    摘要：譯文理解中的塊級(jí)格式化上下文塊級(jí)格式化上下文是網(wǎng)頁視覺渲染的一部分，并用于決定塊盒子的布局。根據(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

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

    摘要：期如何理解中定義塊格式化上下文，是頁面的可視化渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 20190416期 如何理解CSS中BFC? 定義: 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動(dòng)元素與其他元素交互的區(qū)域。 BFC 特性及應(yīng)用 同一個(gè)...

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

  • 外邊距合并

    摘要：如下圖和外邊距合并之后，邊距為。自己和自己合并當(dāng)元素內(nèi)容為空時(shí)，元素設(shè)置的上下會(huì)自己和自己合并。二阻止外邊距合并的方法給父元素加如下圖給加上之后，和就沒有產(chǎn)生外邊距合并了。 一：外邊距合并的場景 從3個(gè)簡單的小例子來看外邊距合并： 1、父子合并 給h1加50px的margin，但實(shí)際上h1和div的margin合并在一起了showImg(https://segmentfault.com...

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

  • 深入清除浮動(dòng)原理

    摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動(dòng)了。下面詳細(xì)看一下這兩大類清除浮動(dòng)的方式及原理。所以，避免穿透啊，清除浮動(dòng)什么的也好理解了。 關(guān)于浮動(dòng) 設(shè)置為浮動(dòng)的元素會(huì)脫離當(dāng)前文檔流，向左或向右移動(dòng)直到邊緣遇到另一個(gè)浮動(dòng)元素或者到達(dá)邊界。普通元素不會(huì)對(duì)齊造成影響。 浮動(dòng)是把雙刃劍，在給我們的布局帶來便利的同時(shí)有一些缺點(diǎn)需要我們?nèi)ソ鉀Q。例如最常見的父元素塌陷。如下圖所示：...

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

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

0條評(píng)論

閱讀需要支付1元查看
<