国产精品天干天干,亚洲毛片在线,日韩gay小鲜肉啪啪18禁,女同Gay自慰喷水

歡迎光臨散文網(wǎng) 會員登陸 & 注冊

塊級格式化上下文-BFC

2022-02-07 00:01 作者:hey_just_do_it  | 我要投稿

什么是BFC

BFC即Block formatting context的簡稱,它是網(wǎng)頁中的一塊渲染區(qū)域,而且它有一套進(jìn)行渲染的規(guī)則,這個(gè)規(guī)則決定了渲染區(qū)域的子元素如何布局,以及元素之間的關(guān)系和相互作用。

BFC的特點(diǎn)

  • BFC渲染區(qū)域是頁面上的一個(gè)隔離的獨(dú)立區(qū)域,獨(dú)立區(qū)域里面的子元素不會影響區(qū)域外面的元素,同樣外部的元素也不會干擾區(qū)域內(nèi)部的元素。

  • BFC渲染區(qū)域內(nèi)部的盒子元素會在垂直方向一個(gè)接一個(gè)放置

  • BFC渲染區(qū)域不會與浮動樣式(float)的盒子疊加

  • BFC渲染區(qū)域內(nèi)部的兩個(gè)相鄰盒子元素垂直方向上的外邊距(margin)會疊加

  • 浮動元素參與BFC渲染區(qū)域高度的計(jì)算

如何觸發(fā)BFC

滿足以下任意一個(gè)條件就可以觸發(fā)BFC:

  • 根元素即HTML元素會觸發(fā)BFC

  • 使用絕對定位(absolute)和固定定位(fixed)會觸發(fā)BFC

  • 使元素浮動(設(shè)置float樣式除none以外的值)會觸發(fā)BFC

  • 設(shè)置display為以下屬性值會觸發(fā)BFC:flex,inline-flex,inline-block,table-cell,table-caption

  • 設(shè)置overflow為以下屬性值會觸發(fā)BFC:hidden,auto,scroll(除了visible意外的值)

BFC的應(yīng)用場景

解決邊距重疊問題

在設(shè)計(jì)網(wǎng)頁時(shí),如果想要垂直方向上的外邊距不重疊,可以通過給其中一個(gè)元素加一個(gè)父元素,并觸發(fā)父元素的BFC,這樣兩個(gè)div就不屬于同一個(gè)BFC,因?yàn)锽FC渲染區(qū)域是頁面上的一個(gè)隔離的獨(dú)立區(qū)域,所以垂直方向上的外邊距就不會重疊,這樣問題就解決了

用于自適應(yīng)兩欄布局

由于.left設(shè)置了浮動,產(chǎn)生了浮動流,導(dǎo)致兩個(gè)元素疊在了一起,觸發(fā).right的BFC來解決這個(gè)問題。

清除浮動

在父元素沒有設(shè)置height,子元素又float的情況下,父元素不會被子元素?fù)伍_。這是因?yàn)樵O(shè)置了float的元素脫離了文檔流,不在原來的父元素里了。同樣可以通過觸發(fā)父元素的BFC就可以解決這個(gè)問題。


解決高度塌陷

樣式中給父元素(parent)設(shè)置了margin:100px,但發(fā)現(xiàn)上邊距沒有出來,這時(shí)就可以通過觸發(fā)父元素的BFC來解決。



塊級格式化上下文-BFC的評論 (共 條)

分享到微博請遵守國家法律
油尖旺区| 镇坪县| 铁力市| 扶余县| 东莞市| 泽库县| 友谊县| 山阴县| 界首市| 江孜县| 商丘市| 民县| 深水埗区| 岑巩县| 深州市| 连江县| 铜山县| 平陆县| 呈贡县| 宜君县| 白水县| 中卫市| 缙云县| 井冈山市| 罗城| 射洪县| 益阳市| 常山县| 武陟县| 无棣县| 喀喇沁旗| 个旧市| 西林县| 普定县| 木里| 通许县| 筠连县| 麻阳| 徐州市| 砀山县| 隆尧县|