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

資訊專(zhuān)欄INFORMATION COLUMN

WEB前端CSS中的BFC是什么

IT那活兒 / 3250人閱讀
WEB前端CSS中的BFC是什么
點(diǎn)擊上方“IT那活兒”，關(guān)注后了解更多內(nèi)容，不管IT什么活兒，干就完了?。?！



什么是BFC
BFC是Block Formatting Context的縮寫(xiě)，格式化上下文，是指一個(gè)獨(dú)立的渲染區(qū)域或者獨(dú)立容器，我們可以理解為一個(gè)封閉的獨(dú)立空間，無(wú)論如何也不會(huì)影響到它的外面。



創(chuàng)建BFC

  • 浮動(dòng)元素，float除none以外的值；

  • 絕對(duì)定位，position（absolute，fixed）；

  • display的值為以下的其中一個(gè)，inline-block，table-cell，table-caption，flex；

  • overflow除了visible以外的值（hidden，auto，scroll）；

  • body根元素。

注：滿足其中一個(gè)即可。


BFC的特性

  • 內(nèi)部的盒子會(huì)在垂直方向上一個(gè)接一個(gè)的放置；

  • 垂直方向的距離是有margin決定；

  • BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊；

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

  • BFC就是一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面的元素。



BFC的應(yīng)用場(chǎng)景
1. 邊距重疊問(wèn)題
要實(shí)現(xiàn)兩個(gè)盒子中間隔30px，創(chuàng)建BFC，給父盒子p標(biāo)簽一個(gè)overflow：hidden屬性。
如圖：
2. 盒子塌陷
需求是只需要里面的子盒子向下移動(dòng)20px，如果沒(méi)有創(chuàng)建BFC,外面的父盒子也會(huì)向下移動(dòng)20px，為了避免這種情況發(fā)生，給父盒子一個(gè)overflow：hidden屬性。
如圖：
3. 清除浮動(dòng)
父盒子里面有兩個(gè)子盒子，浮動(dòng)后會(huì)脫離標(biāo)準(zhǔn)文檔流，會(huì)遮住后面的box盒子，顯然這是我們不希望看到的，所以我們要給父盒子overflow:hidden屬性創(chuàng)建BFC，這樣box盒子就會(huì)顯示完整。
如圖：
4. 文字環(huán)繞問(wèn)題
Son盒子浮動(dòng)后，text盒子文字會(huì)環(huán)繞在周?chē)?，給text盒子創(chuàng)建BFC后，文字與左邊的盒子就會(huì)分開(kāi)，不會(huì)環(huán)繞。
如圖：



本文作者：朱 維

本文來(lái)源：IT那活兒（上海新炬王翦團(tuán)隊(duì)）

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

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

相關(guān)文章

  • 幾個(gè)前端工程師應(yīng)當(dāng)掌握的“詞語(yǔ)”

    摘要：學(xué)堂碼匠各類(lèi)前端術(shù)語(yǔ)知多少有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。 HTML5學(xué)堂-碼匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各類(lèi)前端術(shù)語(yǔ)知多少？ 有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。明確一下這些詞語(yǔ)和概念沒(méi)有什么不好~一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在...

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

  • 幾個(gè)前端工程師應(yīng)當(dāng)掌握的“詞語(yǔ)”

    摘要：學(xué)堂碼匠各類(lèi)前端術(shù)語(yǔ)知多少有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。 HTML5學(xué)堂-碼匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各類(lèi)前端術(shù)語(yǔ)知多少？ 有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。明確一下這些詞語(yǔ)和概念沒(méi)有什么不好~一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在...

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

  • 幾個(gè)前端工程師應(yīng)當(dāng)掌握的“詞語(yǔ)”

    摘要：學(xué)堂碼匠各類(lèi)前端術(shù)語(yǔ)知多少有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。 HTML5學(xué)堂-碼匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各類(lèi)前端術(shù)語(yǔ)知多少？ 有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。明確一下這些詞語(yǔ)和概念沒(méi)有什么不好~一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在...

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

  • 前端程序員需要掌握的幾個(gè)專(zhuān)業(yè)“詞語(yǔ)”

    摘要：有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。明確一下這些詞語(yǔ)和概念沒(méi)有什么不好一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在面試的時(shí)候也能夠應(yīng)對(duì)一些愛(ài)問(wèn)前端名詞的面試官是的縮寫(xiě)，表示的是萬(wàn)維網(wǎng)聯(lián)盟。 有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。 明確一下這些詞語(yǔ)和概念沒(méi)有什么不好~一方面能夠讓自己能夠更專(zhuān)業(yè)...

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

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

0條評(píng)論

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