欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

設(shè)置BFC功能及使用示例詳解

 更新時(shí)間:2023年03月20日 14:31:21   作者:傻小子  
這篇文章主要為大家介紹了設(shè)置BFC功能及使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

首先BFC是啥?

**官方描述:塊格式化上下文(Block Formatting Context,BFC)是 Web 頁面的可視 CSS 渲染的一部分,是塊級盒子的布局過程發(fā)生的區(qū)域,也是浮動(dòng)元素與其他元素交互的區(qū)域。

額......

是的,正常人看完還是不知道BFC是啥。

我用人類的語言嘗試翻譯一下:BFC就是一個(gè)就是一個(gè)容器。只不過這個(gè)容器里面元素怎么布局都不會(huì)影響外面的元素,外面的元素同樣也影響不到這個(gè)盒子里面的元素。

好......

看完差不多你就該問了,???到底怎么影響了?

好嘛,不要急......

不設(shè)置BFC會(huì)對網(wǎng)頁布局有怎么樣的影響?

    .box1 {
      width: 400px;
      border: 10px solid pink;
    }
    .c-box1 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      float: left;
    }
    .c-box2 {
      width: 200px;
      height: 200px;
      background-color: blueviolet;
      float: left;
    }
    .box2 {
      width: 300px;
      height: 300px;
      background-color: red;
    }
<div class="box1">
    <div class="c-box1">
    </div>
    <div class="c-box2">
    </div>
</div>
<div class="box2"></div>

由于box1沒有設(shè)置高度,box1里面的元素設(shè)置浮動(dòng)后,無法將其撐起,從而影響到了外面的box2。那么如果box1是一個(gè)BFC的話,那么效果就會(huì)如下圖一樣:

給box1加上 overflow: hidden;沒錯(cuò)這就是讓一個(gè)容器形成BFC的一種方式。

 .box1 {
      width: 400px;
      border: 10px solid pink;
      overflow: hidden;
  }

???就就就......就這?那么你肯定想問這個(gè)BFC還有其他作用嗎?

BFC還有啥作用?

- 解決盒子高度塌陷的問題

沒錯(cuò),也就是上面那種情況。

- 解決盒子margin塌陷的問題

.box1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      margin-bottom: 30px;
 }
.box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 10px;
 }
 <div class="box1"></div>
 <div class="box2"></div>

盒子垂直方向的margin是存在塌陷問題,box2設(shè)置的10px向上的margin沒起作用。所以,把box1和box2變成一個(gè)BFC就可以解決這個(gè)問題。

- 可以防止元素被相鄰的浮動(dòng)盒子覆蓋

    .box1 {
      float: left;
      width: 150px;
      height: 200px;
      background-color: purple;
     }
    .box2 {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    <div class="box1"></div>
    <div class="box2"></div>

這種情況,除了可以box2設(shè)置overflow: hidden; 還可以設(shè)置float: left。

沒錯(cuò),上面一直用使用overflow: hidden來設(shè)置BFC,其實(shí)設(shè)置浮動(dòng)也是一種形成BFC的方式。那么還有沒有其他方式?答案是肯定的。

都有哪些方式來創(chuàng)建BFC

- 設(shè)置浮動(dòng),不管是左浮動(dòng)還是右浮動(dòng)都可以,float屬性值不是none即可

- 設(shè)置定位,position的值不是static或者ralative

- 設(shè)置display,display的值是inline-block、flex或者inline-flex

- overflow值不為 visible,為 auto、scroll或者h(yuǎn)idden

完結(jié)感想

有沒有發(fā)現(xiàn)創(chuàng)建一個(gè)BFC容器其實(shí)大部分是為了解決浮動(dòng)布局所引起的問題,另外一種說法就叫清除浮動(dòng)。浮動(dòng)布局常見于一些PC端門戶網(wǎng)站,因?yàn)槿温毜墓局饕菍懸苿?dòng)端H5,常用的flex布局、定位這些無意間已經(jīng)是在創(chuàng)建BFC,而且基本上沒有用到浮動(dòng),所以對這塊知識(shí)是比較模糊的。不過概念還是得捋清楚,面試好像挺喜歡問關(guān)于這個(gè)BFC的問題。

以上就是設(shè)置BFC功能及使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于BFC 設(shè)置使用的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法實(shí)例分析

    JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法實(shí)例分析

    這篇文章主要介紹了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量區(qū)別與用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中類的靜態(tài)方法,靜態(tài)變量,實(shí)例方法,實(shí)例變量相關(guān)功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-03-03
  • 將函數(shù)的實(shí)際參數(shù)轉(zhuǎn)換成數(shù)組的方法

    將函數(shù)的實(shí)際參數(shù)轉(zhuǎn)換成數(shù)組的方法

    實(shí)際參數(shù)在函數(shù)中我們可以使用 arguments 對象獲得 (注:形參可通過 arguments.callee 獲得),雖然 arguments 對象與數(shù)組形似,但仍不是真正意義上的數(shù)組。
    2010-01-01
  • 20個(gè)你不得不知道的js位運(yùn)算用法

    20個(gè)你不得不知道的js位運(yùn)算用法

    位運(yùn)算,那些看似晦澀但又蘊(yùn)含無限魔力的數(shù)字魔術(shù),在JavaScript開發(fā)中扮演了默默無聞卻又至關(guān)重要的角色,本文介紹多個(gè)js位運(yùn)算的使用場景,闡述在JavaScript中,如何巧妙運(yùn)用位運(yùn)算實(shí)現(xiàn)效率的提升和算法的優(yōu)化,需要的朋友可以參考下
    2023-12-12
  • js中opener與parent的區(qū)別詳細(xì)解析

    js中opener與parent的區(qū)別詳細(xì)解析

    本篇文章主要是對js中opener與parent的區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法分析

    JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法分析

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例形式分析了javascript事件綁定的常用技巧與注意事項(xiàng),需要的朋友可以參考下
    2017-11-11
  • JS小游戲之仙劍翻牌源碼詳解

    JS小游戲之仙劍翻牌源碼詳解

    這篇文章主要介紹了JS小游戲之仙劍翻牌源碼,是一款比較經(jīng)典的卡牌類游戲,對于javascript游戲設(shè)計(jì)有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下
    2014-09-09
  • 小程序如何支持使用 async/await詳解

    小程序如何支持使用 async/await詳解

    這篇文章主要介紹了小程序如何支持使用 async/await詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • JavaScript中分號(hào)的一些細(xì)節(jié)

    JavaScript中分號(hào)的一些細(xì)節(jié)

    這篇文章主要給大家介紹了關(guān)于JavaScript中分號(hào)的一些細(xì)節(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • javascript 隨機(jī)抽獎(jiǎng)程序代碼

    javascript 隨機(jī)抽獎(jiǎng)程序代碼

    javascript 隨機(jī)抽獎(jiǎng)程序代碼,主要是利用了js的Math.random方法。需要的朋友可以參考下。
    2009-11-11
  • 50行代碼實(shí)現(xiàn)Webpack組件使用次數(shù)統(tǒng)計(jì)

    50行代碼實(shí)現(xiàn)Webpack組件使用次數(shù)統(tǒng)計(jì)

    這篇文章主要介紹了50行代碼實(shí)現(xiàn)Webpack組件使用次數(shù)統(tǒng)計(jì),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03

最新評論