盒模型與BFC的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)盒模型與BFC的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的金壇網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

標(biāo)準(zhǔn)盒模型與IE盒模型

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

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

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

標(biāo)準(zhǔn)盒模型（box-sizing: content-box），即W3C標(biāo)準(zhǔn)中默認(rèn)的盒模型。它規(guī)定，一個元素的寬高并不包含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;

至此，兩種盒模型的區(qū)別應(yīng)該挺明白的了吧。接下來我們講講有關(guān)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渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域

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

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

1. 這兩個或多個外邊距沒有被非空內(nèi)容、padding、border 或 clear 分隔開。

2. 這些 margin 都處于普通流中。

BFC原理

• 浮動定位和清除浮動時只會應(yīng)用于同一個BFC內(nèi)的元素

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

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

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

建立BFC

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

• 浮動（float的值不為none）

• 絕對定位元素（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)用場景

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

創(chuàng)建BFC之后：

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

將右邊元素改成BFC之后：

關(guān)于盒模型與BFC的示例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當(dāng)前文章：盒模型與BFC的示例分析
文章地址：http://muchs.cn/article44/geeiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、移動網(wǎng)站建設(shè)、、自適應(yīng)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)