国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Ryan_Li / 3160人閱讀

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

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

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

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

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

二、創(chuàng)建 BFC

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

浮動元素 float ＝ left | right 或 inherit（≠ none）

絕對定位元素 position ＝ absolute 或 fixed

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

overflow ＝ hidden | auto 或 scroll (≠ visible)

三、BFC 的特性

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

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

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

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

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

四、BFC 的作用 1.包含浮動元素（清除浮動）

浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，導致無法計算準確的高度，這種問題稱為高度塌陷。

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

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

解決方法：在容器（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，固然可以解決高度塌陷的問題，但是大范圍應用在布局上肯定不是最合適的，畢竟 overflow:hidden 會造成溢出隱藏的問題，尤其是與 JS 的交互效果會有影響。

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

2.導致外邊距折疊

相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的垂直邊距相遇時， 它們將形成一個外邊距。這個外邊距的高度等于兩個發(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）中包含兩個綠色的兄弟元素（P），并且紅色盒子設置 overflow: hidden; 則一個BFC 已經(jīng)被創(chuàng)建,即導致外邊距折疊。

理論上兩個兄弟元素之間的邊距應該是兩個元素的邊距之和（20px），但實際是 10px。這就是外邊距折疊導致的。

2.1 折疊外邊距的值

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

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

兩個相鄰的外邊距是 一正一負 時，折疊外邊距是兩者相加的和。

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

3.避免外邊距折疊

這一聽起來可能有些困惑，因為我們在前面討論了 BFC 導致外邊距折疊的問題。但我們必須記住的是外邊距折疊（Margin collapsing）只會發(fā)生在屬于同一BFC的塊級元素之間。如果它們屬于不同的 BFC，它們之間的外邊距則不會折疊。所以通過創(chuàng)建一個不同的 BFC ，就可以避免外邊距折疊。

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

HTML

 
        
Sibling 1
 
        
Sibling 2
 
        
Sibling 3

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

創(chuàng)建一個不同的 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 */ 
}

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

閱讀更多

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115774.html

相關文章

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

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

    layman 評論0 收藏0

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

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

    qpwoeiru96 評論0 收藏0

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

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

    Turbo 評論0 收藏0

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

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

    Tamic 評論0 收藏0

  • 前端面試題-CSS選擇器

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

    leanote 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<