前端人人都應該理解的盒模型BFC渲染機制

testHs 發布于2019-08-30 13:52 / 714人閱讀

摘要：如圖所示如果你眼力不錯或者親自試試會發現個之間設置了的距離但是他們現在實際的間距卻是。如何設置盒模型的類型通過的就可以設置為盒模型了默認是盒模型渲染機制基本慨念是英文縮寫翻譯為塊級格式化上下文。說白了就是一種盒模型的渲染規則。

前端人人都要懂的盒模型BFC渲染機制 為什么我們說,前端工程師有必要需要了解BFC渲染機制?

因為如果你一個前端壓根沒聽說過BFC,那你是如何理解下面這幾個css現象的呢?

現象一:  垂直方向上元素margin的合并現象

首先,有父子嵌套關系的2個元素,代碼和示例如下:

    
    

  ---- html部分---

然后,我們給子元素添加一個margin-top: 50px時

      .son {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 50px;
        }

我們神奇的發現父子元素同時"掉下來了50px",如圖所示

所以這里的問題是: 為什么2個div一起向下掉呢?

現象二: 垂直方向上元素margin的合并現象

現在,我們有2個兄弟關系的元素,代碼和示例如下:

    
    
     ---- html部分---

然后,我們給上邊的元素添加 margin-bottom:50px , 下邊的元素添加 margin-top : 50px。

        .bother1 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-bottom: 60px;
        }
        .bother2 {
            width: 100px;
            height: 100px;
            background: cadetblue;
            margin-top: 40px;
        }

如圖所示:

如果你眼力不錯,或者親自試試,會發現2個div之間設置了100px的距離,但是他們現在實際的間距卻是50px。

所以這里的問題是: 為什么2個div的間距是50px,而非100px呢?

現象三: overflow:hidden,可以清除浮動造成的副作用

一對父子關系的div,父元素的高度是通過子元素的高度撐開的,如圖

    
    
     ---- html部分---

然后,我們給子元素float:left之后,子元素脫離的文檔流,于是父元素的高度為0了,如圖

     .son {
            width: 100px;
            height: 100px;
            background: skyblue;
            float : left;
        }

這個現象,我相信大家都知道如何解決,不就是需要"清除浮動"嗎?

我這里想說的是,"清楚浮動"有2種原理,一類是clear: both,一類就是依靠BFC原理.

所以這里的問題是: 為什么給父元素添加 overflow: hidden 就可以"清除浮動"呢?

現象四: overflow:hidden 配合浮動,可以實現2欄自適應布局

如圖所示,我們已經實現了左側固定300px,右側自適應的布局

所以這里的問題是: 為什么添加 overflow: hidden 和浮動就可以實現2欄自適應布局呢?

    
    
     ---- html部分---
    
    
        left
        right

好了,以上四個看似毫無關系的"奇葩"現象,不知道是否理解出現這些現象的原因呢?

如果回答不上來,那就建議你好好看下這篇文章了。

當然如果你沒有見過這些現象的,那你就賺到了,這么多"奇葩"問題,你看一篇文章就全解決了,省了你不少力氣呢!

CSS盒模型

CSS盒模型的基本概念: 盒模型分為W3C盒模型和IE盒模型,他們的區別是計算width和height的方式不同,IE盒模型的width是從border開始計算的。

如何設置CSS盒模型的類型 : 通過CSS3的 box-sizing:border-box就可以設置為IE盒模型了,默認是W3C盒模型

BFC渲染機制 BFC基本慨念

BFC是英文縮寫,翻譯為"塊級格式化上下文"。

說白了BFC就是一種css盒模型的渲染規則。既然說了是渲染規則,那你自然需要去記住這些規則了,沒法解釋為什么。

BFC渲染規則

BFC其實有很多渲染規則,我們這里說4條比較重要的規則,知道這些規則,你就可以回答上面的4個現象了。

規則1: 創建了BFC的元素中,在垂直方向上的margin會發生重疊。根元素就是一個BFC元素 (這個可以解釋margin重疊)

規則2: BFC元素在頁面上是一個獨立的容器,外面的元素和里面的元素互不影響。

規則3: BFC元素不會和浮動的元素重疊。(這個可以解釋兩欄自適應)

規則4: 計算BFC元素的高度時,里面浮動元素的高度也會參與計算 (用來解釋overflow:hidden可以清除浮動)

普通元素如何創建BFC

首先我們根元素html,就是最大的BFC容器。

創建BFC的方式很多,常見包括:

float不為none的都可以

overflow: hidden / auto

position: 不為static 、 relative都可以

display: table-cell ... 表格相關的

不過我覺得用到最多的還是

overflow : hidden

畢竟其他的position float display都是很容易影響頁面布局的,我們一般也不想為了創建BFC區域就引發頁面布局的變動吧。

補充

不知道各位看了BFC的渲染規則和創建方式后,是否能夠自行去解釋前面的4個現象了呢?

補充2點:

關于margin的重疊規則。在現象二中,他們的重疊規則是,margin-bottom和margin-top會重疊,重疊之后取較大的margin值

關于"清除浮動"的說法。實際上"清除浮動"的說法不太準確,因為清除浮動,你直接刪掉float:left就行了。更準確的說是"閉合浮動",或者說清除浮動帶來的副作用。

最后，如果有什么疑問，歡迎留言討論，
如果覺得真的對您對BFC的理解有幫助的話請點贊示意！謝謝。

高性能計算人人都說我愛你渲染模型云服務器怎么理解前端工程師前端都包括什么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115598.html

一篇文章帶拿下盒模型BFC渲染機制

摘要：它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。一個的范圍包含創建該上下文元素的所有子元素，但不包括創建了新的子元素的內部元素。走在前端的大道上本篇將自己讀過的相關盒模型BFC 文章中，對自己有啟發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。一.常見定位方案在講 BFC 之前，我們先來了解一下常見的...

DangoSky 2019-08-30 15:55 評論0 收藏0
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0
深入理解盒模型與BFC

摘要：標準盒模型與盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。標準盒模型與IE盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...

gself 2019-08-29 17:14 評論0 收藏0
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0