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

資訊專欄INFORMATION COLUMN

BFC(塊級(jí)格式化上下文)的特點(diǎn)和應(yīng)用場(chǎng)景

XiNGRZ / 3370人閱讀

摘要：的特點(diǎn)是元素?fù)碛歇?dú)立的渲染區(qū)域元素內(nèi)部的內(nèi)容邊距浮動(dòng)元素等不會(huì)影響到外部元素。

BFC(Block Formatting Context)的特點(diǎn)是元素?fù)碛歇?dú)立的渲染區(qū)域,元素內(nèi)部的內(nèi)容(邊距,浮動(dòng)元素等)不會(huì)影響到外部元素。
哪些情況下會(huì)觸發(fā)BFC

設(shè)置overflow屬性,值不為visible

設(shè)置float屬性,值不為none

設(shè)置position屬性,值為absolute或fixed

設(shè)置display屬性,值為inline-block, table-cell, table-caption, flex, inline-flex, grid,或者inline-grid

BFC的典型應(yīng)用場(chǎng)景: 解決塊級(jí)元素的塌陷問題(Collapsing)

塊級(jí)元素的垂直塌陷: 當(dāng)兩個(gè)相鄰的塊級(jí)元素?fù)碛猩舷路较蛳噜彽倪吘鄷r(shí)(例如:上面的元素?fù)碛衜argin-bottom值,下面的元素?fù)碛衜argin-top值),此時(shí)上下元素之間的間隙不是兩者邊距之和,而是兩者之中的值較大的一個(gè)

塊級(jí)元素的包含塌陷: 當(dāng)塊級(jí)父元素沒有boder,padding值,塊級(jí)子元素有margin-top值時(shí),子元素的margin-top值會(huì)在父元素的外部生效,也就是整個(gè)父元素區(qū)域會(huì)向下偏移,這個(gè)偏移值由子元素的margin-top值決定

此外,BFC還可以用于清除浮動(dòng)帶來的影響等

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

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

相關(guān)文章

  • BFC(塊級(jí)格式化上下文)的特點(diǎn)和應(yīng)用場(chǎng)景

    摘要：的特點(diǎn)是元素?fù)碛歇?dú)立的渲染區(qū)域元素內(nèi)部的內(nèi)容邊距浮動(dòng)元素等不會(huì)影響到外部元素。 BFC(Block Formatting Context)的特點(diǎn)是元素?fù)碛歇?dú)立的渲染區(qū)域,元素內(nèi)部的內(nèi)容(邊距,浮動(dòng)元素等)不會(huì)影響到外部元素。 哪些情況下會(huì)觸發(fā)BFC 設(shè)置overflow屬性,值不為visible 設(shè)置float屬性,值不為none 設(shè)置position屬性,值為absolute或fi...

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

  • BFC及應(yīng)用學(xué)習(xí)總結(jié)

    首先回顧一下普通流，普通流對(duì)后面進(jìn)一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是網(wǎng)頁(yè)中元素的默認(rèn)排版，默認(rèn)情況下 塊級(jí)元素：以block flow direction排列（每一個(gè)塊級(jí)元素新起一行，即以從上往下以列排列） 行內(nèi)元素：不會(huì)另起一行，一個(gè)接一個(gè)排布，直到空間不足 脫離普通流 CSS有以下幾種方法使元素脫離普通流 float float能夠使元素向某一方向偏移，...

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

  • CSS布局相關(guān)基本概念

    摘要：當(dāng)一個(gè)元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間基于文檔流，理解定位模式相對(duì)定位，即相對(duì)于元素在文檔流中位置進(jìn)行偏移。絕對(duì)定位，即完全脫離文檔流，相對(duì)于屬性非值的最近父級(jí)元素進(jìn)行偏移。 主要參考文檔：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 測(cè)試?yán)樱篽ttps...

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

  • 深入css布局 (3)完結(jié) — margin問題與格式化上下文

    ? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。 ? css布局篇已經(jīng)講個(gè)2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動(dòng)等知識(shí)點(diǎn)。今天呢，我們把css布局篇做一個(gè)結(jié)尾，最后...

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

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

0條評(píng)論

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