資訊專欄INFORMATION COLUMN
摘要：標(biāo)準(zhǔn)盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個(gè)盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個(gè)元素的組成分為。
標(biāo)準(zhǔn)盒模型與IE盒模型
開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個(gè)css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，可以用box-sizing去定義元素的盒模型。
比較這兩個(gè)盒模型的差異之前，我們先來看一張圖：
先不討論寬高，我們把一個(gè)元素的組成分為：content、padding、border、margin。
標(biāo)準(zhǔn)盒模型（box-sizing: content-box），即W3C標(biāo)準(zhǔn)中默認(rèn)的盒模型。它規(guī)定，一個(gè)元素的寬高并不包含padding和border，那么它在渲染時(shí)的寬高計(jì)算公式如下：
width = content width; height = content height;
IE盒模型（box-sizing: border-box），則恰恰相反，它的寬高實(shí)際上是包含padding和border的，所以
width = content width + padding + border; height = content height + padding + border;
如圖，demo地址請(qǐng)點(diǎn)擊
至此，兩種盒模型的區(qū)別應(yīng)該挺明白的了吧。接下來我們講講有關(guān)BFC的東西。
什么是BFCBFC，即 Block Formatting Context 直譯為 “塊級(jí)格式化上下文”。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渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域
深入了解 BFC 之前，我們看看，什么是 “外邊距重疊”。
外邊距重疊（Collapsing margins），指的是毗鄰的兩個(gè)或多個(gè)外邊距 (包括父子元素) 會(huì)合并成一個(gè)外邊距。其中所說的 margin 毗鄰，可以歸結(jié)為以下兩點(diǎn)：
這兩個(gè)或多個(gè)外邊距沒有被非空內(nèi)容、padding、border 或 clear 分隔開。
這些 margin 都處于普通流中。
BFC原理
浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素
浮動(dòng)不會(huì)影響其它BFC中元素的布局，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)
外邊距折疊也只會(huì)發(fā)生在屬于同一BFC的塊級(jí)元素之間
因此，我們常常通過建立BFC來防止外邊距重疊的發(fā)生。
建立BFC通過以下方式可以使元素成為一個(gè)BFC：
浮動(dòng)（float的值不為none）
絕對(duì)定位元素（position的值為absolute或fixed）
行內(nèi)塊（display為inline-block）
表格單元（display為table、table-cell、table-caption等HTML表格相關(guān)屬性）
彈性盒（display為flex或inline-flex）
overflow不為visible
BFC其他應(yīng)用場(chǎng)景1、由于BFC在計(jì)算高度時(shí)，其所包含的所有元素，包括浮動(dòng)元素都是參與計(jì)算的。所以甚至可以使用BFC來達(dá)到清除浮動(dòng)的效果。
創(chuàng)建BFC之后：
2、由于BFC與float元素是不會(huì)發(fā)生重疊的，根據(jù)這個(gè)特性，可以做到自適應(yīng)兩欄布局。由于左邊元素浮動(dòng)，造成右邊元素的背景沾滿了整個(gè)容器。
將右邊元素改成BFC之后：
BFC相關(guān)demo請(qǐng)點(diǎn)擊
參考：
https://segmentfault.com/a/1190000012265930
http://w3help.org/zh-cn/kb/006/
MDN：BFC
MDN：Mastering margin collapsing
關(guān)于我微信號(hào)：rcgrcg，歡迎交友～
為了生計(jì)，我也接外包項(xiàng)目的哦～
網(wǎng)站搭建（PC、H5、前后端全包，我們有團(tuán)隊(duì)的哦），APP開發(fā)（安卓和IOS），都是有成功案例的哦。
有興趣的請(qǐng)聯(lián)系我！！服務(wù)包您滿意的那種！！
Good luck！
2018-11-13 廈門
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/114186.html
摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...
摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...
閱讀 3448·2023-04-26 00:39
閱讀 4038·2021-09-22 10:02
閱讀 2532·2021-08-09 13:46
閱讀 1098·2019-08-29 18:40
閱讀 1443·2019-08-29 18:33
閱讀 773·2019-08-29 17:14
閱讀 1512·2019-08-29 12:40
閱讀 2969·2019-08-28 18:07
