深入理解盒模型與BFC

gself 發布于2019-08-29 17:14 / 778人閱讀

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

標準盒模型與IE盒模型

開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，可以用box-sizing去定義元素的盒模型。

比較這兩個盒模型的差異之前，我們先來看一張圖：

先不討論寬高，我們把一個元素的組成分為：content、padding、border、margin。

標準盒模型（box-sizing: content-box），即W3C標準中默認的盒模型。它規定，一個元素的寬高并不包含padding和border，那么它在渲染時的寬高計算公式如下：

width = content width;
height = content height;

IE盒模型（box-sizing: border-box），則恰恰相反，它的寬高實際上是包含padding和border的，所以

width = content width + padding + border;
height = content height + padding + border;

如圖，demo地址請點擊

至此，兩種盒模型的區別應該挺明白的了吧。接下來我們講講有關BFC的東西。

什么是BFC

BFC，即 Block Formatting Context 直譯為 “塊級格式化上下文”。MDN上的定義為：

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

其是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域

深入了解 BFC 之前，我們看看，什么是 “外邊距重疊”。

外邊距重疊（Collapsing margins），指的是毗鄰的兩個或多個外邊距 (包括父子元素) 會合并成一個外邊距。其中所說的 margin 毗鄰，可以歸結為以下兩點：

這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。

這些 margin 都處于普通流中。

BFC原理

浮動定位和清除浮動時只會應用于同一個BFC內的元素

浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動

外邊距折疊也只會發生在屬于同一BFC的塊級元素之間

因此，我們常常通過建立BFC來防止外邊距重疊的發生。

建立BFC

通過以下方式可以使元素成為一個BFC：

浮動（float的值不為none）

絕對定位元素（position的值為absolute或fixed）

行內塊（display為inline-block）

表格單元（display為table、table-cell、table-caption等HTML表格相關屬性）

彈性盒（display為flex或inline-flex）

overflow不為visible

BFC其他應用場景

1、由于BFC在計算高度時，其所包含的所有元素，包括浮動元素都是參與計算的。所以甚至可以使用BFC來達到清除浮動的效果。

創建BFC之后：

2、由于BFC與float元素是不會發生重疊的，根據這個特性，可以做到自適應兩欄布局。由于左邊元素浮動，造成右邊元素的背景沾滿了整個容器。

將右邊元素改成BFC之后：

BFC相關demo請點擊

參考：

https://segmentfault.com/a/1190000012265930

http://w3help.org/zh-cn/kb/006/

MDN：BFC

MDN：Mastering margin collapsing

關于我

微信號：rcgrcg，歡迎交友～

為了生計，我也接外包項目的哦～

網站搭建（PC、H5、前后端全包，我們有團隊的哦），APP開發（安卓和IOS），都是有成功案例的哦。

有興趣的請聯系我！！服務包您滿意的那種！！

Good luck！
2018-11-13 廈門

GPU云服務器云服務器盒模型深入理解系列深入理解linux 深入理解webrtc

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

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

CCS 盒模型分析

摘要：基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種，標準盒模型和盒模型。基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

Jochen 2019-08-30 15:56 評論0 收藏0
CCS 盒模型分析

摘要：基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種，標準盒模型和盒模型。基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

trigkit4 2019-08-02 14:27 評論0 收藏0
【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

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

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

binta 2019-08-29 16:13 評論0 收藏0