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

資訊專欄INFORMATION COLUMN

前端面試題-BFC(塊格式化上下文)

Ryan_Li / 3185人閱讀

摘要：一的概念規(guī)范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。我們可以使用實(shí)現(xiàn)清除浮動(dòng)，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動(dòng)。

一、BFC 的概念 1.規(guī)范解釋 
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。
2.通俗理解

BFC 是一個(gè)獨(dú)立的布局環(huán)境,可以理解為一個(gè)容器,在這個(gè)容器中按照一定規(guī)則進(jìn)行物品擺放,并且不會(huì)影響其它環(huán)境中的物品。

如果一個(gè)元素符合觸發(fā) BFC 的條件，則 BFC 中的元素布局不受外部影響。

浮動(dòng)元素會(huì)創(chuàng)建 BFC，則浮動(dòng)元素內(nèi)部子元素主要受該浮動(dòng)元素影響，所以兩個(gè)浮動(dòng)元素之間是互不影響的。

二、創(chuàng)建 BFC

根元素或包含根元素的元素

浮動(dòng)元素 float ＝ left | right 或 inherit（≠ none）

絕對(duì)定位元素 position ＝ absolute 或 fixed

display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption

overflow ＝ hidden | auto 或 scroll (≠ visible)

三、BFC 的特性

BFC 是一個(gè)獨(dú)立的容器，容器內(nèi)子元素不會(huì)影響容器外的元素。反之亦如此。

盒子從頂端開始垂直地一個(gè)接一個(gè)地排列，盒子之間垂直的間距是由 margin 決定的。

在同一個(gè) BFC 中，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)發(fā)生重疊。

BFC 區(qū)域不會(huì)和 float box 發(fā)生重疊。

BFC 能夠識(shí)別并包含浮動(dòng)元素，當(dāng)計(jì)算其區(qū)域的高度時(shí)，浮動(dòng)元素也可以參與計(jì)算了。

四、BFC 的作用 1.包含浮動(dòng)元素（清除浮動(dòng)）

浮動(dòng)元素會(huì)脫離文檔流(絕對(duì)定位元素也會(huì)脫離文檔流)，導(dǎo)致無法計(jì)算準(zhǔn)確的高度，這種問題稱為高度塌陷。

解決高度塌陷問題的前提是能夠識(shí)別并包含浮動(dòng)元素，也就是清除浮動(dòng)。

問題舉例：如上左圖所示，容器（container）沒有高度或者 height = auto ,并且其子元素（sibling）是浮動(dòng)元素，所以該容器的高度是不會(huì)被撐開的，即高度塌陷。

解決方法：在容器（container）中創(chuàng)建 BFC。

HTML

CSS

.container { 
        overflow: hidden; /* creates block formatting context */ 
        background-color: green; 
} 
.container .Sibling { 
        float: left; 
        margin: 10px;
        background-color: lightgreen;  
}

特別提示：

通過 overflow:hidden 創(chuàng)建 BFC，固然可以解決高度塌陷的問題，但是大范圍應(yīng)用在布局上肯定不是最合適的，畢竟 overflow:hidden 會(huì)造成溢出隱藏的問題，尤其是與 JS 的交互效果會(huì)有影響。

我們可以使用 clearfix 實(shí)現(xiàn)清除浮動(dòng)，這里就不多介紹了，想要了解的可以閱讀前端面試題-clearfix（清除浮動(dòng)）。

2.導(dǎo)致外邊距折疊

相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的垂直邊距相遇時(shí)， 它們將形成一個(gè)外邊距。這個(gè)外邊距的高度等于兩個(gè)發(fā)生折疊的外邊距的高度中的較大者。

HTML

 
    
Sibling 1
 
    
Sibling 2

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

如上圖所示：紅色盒子（Container）中包含兩個(gè)綠色的兄弟元素（P），并且紅色盒子設(shè)置 overflow: hidden; 則一個(gè)BFC 已經(jīng)被創(chuàng)建,即導(dǎo)致外邊距折疊。

理論上兩個(gè)兄弟元素之間的邊距應(yīng)該是兩個(gè)元素的邊距之和（20px），但實(shí)際是 10px。這就是外邊距折疊導(dǎo)致的。

2.1 折疊外邊距的值

兩個(gè)相鄰的外邊距都是 正數(shù) 時(shí)，折疊外邊距是兩者中較大的值。

兩個(gè)相鄰的外邊距都是 負(fù)數(shù) 時(shí)，折疊外邊距是兩者中絕對(duì)值較大的值。

兩個(gè)相鄰的外邊距是 一正一負(fù) 時(shí)，折疊外邊距是兩者相加的和。

2.2 外邊距折疊的條件是 margin 必須相鄰!

3.避免外邊距折疊

這一聽起來可能有些困惑，因?yàn)槲覀冊(cè)谇懊嬗懻摿?BFC 導(dǎo)致外邊距折疊的問題。但我們必須記住的是外邊距折疊（Margin collapsing）只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間。如果它們屬于不同的 BFC，它們之間的外邊距則不會(huì)折疊。所以通過創(chuàng)建一個(gè)不同的 BFC ，就可以避免外邊距折疊。

修改前面的例子并添加第三個(gè)兄弟元素，CSS不變。

HTML

 
        
Sibling 1
 
        
Sibling 2
 
        
Sibling 3

結(jié)果不會(huì)改變，還會(huì)折疊外邊距，三個(gè)兄弟元素（P）將會(huì)以垂直距離為 10px 的距離分開。原因是三個(gè)兄弟元素都屬于同一個(gè) BFC。

創(chuàng)建一個(gè)不同的 BFC ，就可以避免外邊距折疊。

HTML

 
        
Sibling 1
 
        
Sibling 2
 
        
 
            
Sibling 3

CSS

.Container { 
            background-color: red; 
            overflow: hidden; /* creates a block formatting context */ 
} 
p { 
            background-color: lightgreen; 
            margin: 10px 0; 
}
.newBFC { 
            overflow: hidden; /* creates new block formatting context */ 
}

當(dāng)?shù)诙偷谌齻€(gè)兄弟元素屬于不同的 BFC 時(shí)，它們之間就沒有外邊距折疊。

閱讀更多

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

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

相關(guān)文章

  • 前端面試題-BFC(塊格式化上下文)

    摘要：一的概念規(guī)范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。我們可以使用實(shí)現(xiàn)清除浮動(dòng)，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動(dòng)。 一、BFC 的概念 1.規(guī)范解釋 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級(jí)盒子的...

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

  • WEB前端面試題匯總（CSS）

    摘要：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。和屬性的異同共同點(diǎn)對(duì)內(nèi)聯(lián)元素設(shè)置和屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。 position的值， relative和absolute分別是相對(duì)于誰進(jìn)行定位的？ 、relative:相對(duì)定位，相對(duì)于自己本身在正常文檔流中的位置進(jìn)行定位。、absolute:生成絕對(duì)定位，相對(duì)于最近一...

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

  • 2019屆校招前端面試題整理——HTML、CSS篇

    摘要：前言屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。標(biāo)簽提供給頁面的一些元信息名稱值對(duì)，有助于。開啟缺點(diǎn)一個(gè)是不支持，另一個(gè)是一旦子元素的大小超過父容器的大小，就會(huì)出顯示問題。用于設(shè)置或檢索元素的縮放比例，值為即使用元素的實(shí)際尺寸。 前言 2019屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。 HTML部分 1. 什么是？ DOCTYPE是html5標(biāo)準(zhǔn)網(wǎng)頁聲明，且必須聲明在HTML文檔...

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

  • 2019屆校招前端面試題整理——HTML、CSS篇

    摘要：前言屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。標(biāo)簽提供給頁面的一些元信息名稱值對(duì)，有助于。開啟缺點(diǎn)一個(gè)是不支持，另一個(gè)是一旦子元素的大小超過父容器的大小，就會(huì)出顯示問題。用于設(shè)置或檢索元素的縮放比例，值為即使用元素的實(shí)際尺寸。 前言 2019屆校招陸陸續(xù)續(xù)開始了，整理了一些高頻的面試題。 HTML部分 1. 什么是？ DOCTYPE是html5標(biāo)準(zhǔn)網(wǎng)頁聲明，且必須聲明在HTML文檔...

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

  • 前端面試題-CSS選擇器

    摘要：一選擇器作用選擇器用于定位我們想要給予樣式的元素，但不只是在中，對(duì)的選擇器也是支持的，比如。在選被元素后插入內(nèi)容其用法和特性與相似。所有偽元素選擇器在前端面試題偽類和偽元素?cái)U(kuò)展閱讀前端面試題清除浮動(dòng)前端面試題塊格式化上下文 一、CSS選擇器作用 CSS 選擇器用于定位我們想要給予樣式的 HTML 元素，但不只是在 CSS 中，JavaScript 對(duì) CSS 的選擇器也是支持的，比如 ...

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

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

0條評(píng)論

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