IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別

這篇文章主要介紹“IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別”，在日常操作中，相信很多人在IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，小程序設(shè)計，十余年建站對成都木制涼亭等多個行業(yè)，擁有多年建站經(jīng)驗。

盒子模型（Box Model）是 CSS 的核心，現(xiàn)代 Web 布局設(shè)計簡單說就是一堆盒子的排列與嵌套，掌握了盒子模型與它們的擺放控制，會發(fā)現(xiàn)再復(fù)雜的頁面也不過如此，然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來自 IE6，一種來自 W3C 標(biāo)準(zhǔn)瀏覽器。

盒子模型

下圖就是一個典型的盒子模型示意圖

在內(nèi)容區(qū)外面，依次圍繞著 padding 區(qū)，border 區(qū)，margin 區(qū)，這一模型結(jié)構(gòu)在所有主流瀏覽器都是一致的。通過盒子模型，我們可以為我們的內(nèi)容設(shè)置邊界，留白以及邊距，盒子模型最典型的應(yīng)用是這樣：我們有一段內(nèi)容，可以為這段內(nèi)容設(shè)置一個邊框，為了讓內(nèi)容不至于緊挨著邊框，可以設(shè)置 padding ，為了讓這個盒子不至于和別的盒子靠得太緊，可以設(shè)置 margin。

到目前為止，一切都很***，直到當(dāng)我們想為這個盒子設(shè)置一個尺寸的時候。

IE6 和 W3C 標(biāo)準(zhǔn)瀏覽器對盒子模型的不同詮釋

當(dāng)我們試圖為一個盒子設(shè)置尺寸的時候，問題出現(xiàn)了。IE6 和 W3C 標(biāo)準(zhǔn)瀏覽器對盒子模型有不同的解釋，這個不同解釋表現(xiàn)在盒子的尺寸上，下圖是兩種類型的瀏覽器對盒子尺寸的不同解釋示意圖：

可以看出，IE6 盒子模型中，盒子的尺寸包含了 內(nèi)容區(qū)，padding， border 和 margin 這四個部分，而 W3C 的盒子模型中，盒子的尺寸只包含內(nèi)容區(qū)，padding，border 和 margin 被排除在盒子尺寸之外。

為什么IE6 的盒子模型更合理

在現(xiàn)實世界中，我們描述一個物理盒子的時候，如果談到尺寸，是不會只計算其盛放的物體的尺寸的，我們還會算上空隙與盒體本身。拿集裝箱裝箱為例，我們有 100 只花瓶，每只花瓶用1個紙盒包裝，為了防止花瓶破碎，我們在花瓶周圍塞上泡沫，這相當(dāng)于 padding，紙盒的外圍紙板相當(dāng)于 border，在裝集裝箱的時候，為了防止紙盒之間相互碰撞，紙盒之間塞上稻草，這相當(dāng)于 margin，很顯然，我們向貨運(yùn)公司報告我們貨物尺寸的時候，是要將整個紙盒的尺寸，連同紙盒之間需要塞稻草的空隙都告訴他們的，倘若只報告花瓶的尺寸，貨運(yùn)公司是沒有辦法裝箱的。

再舉一個例子，假若我們有一面墻，要在上面掛10幅油畫，油畫是用相框裱糊的，相框的邊框相當(dāng)于 border，油畫和邊框之間的距離相當(dāng)于 padding，相框之間的間隔相當(dāng)于 margin，這個例子和 Web 布局設(shè)計已經(jīng)很接近了，對任何人來說，使用 IE6 的盒子模型，將整個相框，包括油畫當(dāng)做一個整體更容易布局，當(dāng)你知道了整個相框的尺寸后，不必再去考慮 padding, border, margin 這個因素的影響，每個相框就是一個整體，至于 padding, border 與 margin，這是瀏覽器自己事，不需要設(shè)計者去關(guān)心。

在具體的 Web 設(shè)計中

在具體 Web 設(shè)計中，尤其牽扯到復(fù)雜網(wǎng)格布局的時候，IE6 的盒子模型更容易控制，我們不妨看看以下幾個設(shè)計場景。

1.  面板式界面設(shè)計

頁面上包含幾個面板，比如一個登錄面板，一個***新聞面板，一個投票面板，這類設(shè)計典型的做法是，用背景圖的方式，首先逐個設(shè)計出這些面板的外觀圖，將需要用具體內(nèi)容替換的地方空著，這些面板，無非就是一些使用面板外觀圖片做背景圖的盒子，然后，在這些盒子里面，放上具體的內(nèi)容，使用 padding 控制內(nèi)容的擺放位置，使用 margin 調(diào)整面板本身的擺放位置，由于面板的尺寸是固定的，我們依此確立了盒子的尺寸之后，就無需再關(guān)心尺寸問題，然后，不論你怎樣調(diào)整 padding 和 margin，都不會影響面板本身的結(jié)構(gòu)。這是 IE6 盒子模型。

而在 W3C 的盒子模型中，調(diào)整 padding 和 margin ，都會影響盒子的尺寸，你在調(diào)整內(nèi)容擺放位置的同時，極有可能打亂面板本身的結(jié)構(gòu)。

2. 百分比級尺寸 + 像素級邊界問題

W3C 盒子模型在設(shè)計中最讓人頭疼的是，假如你有一個不確定寬度的容器，想在里面放置兩個同樣大小的盒子，最合理的的做法當(dāng)時是設(shè)置每個盒子的寬度為 50%，這樣，不管你的容器寬度為多大，這兩個盒子總能自動適應(yīng)這個寬度，然而，前提是你不要設(shè)置任何 padding 或 border，而，現(xiàn)實中，為了防止兩個盒子中的內(nèi)容互相挨得太近，你肯定要設(shè)置 padding，一旦設(shè)置了 padding，就會發(fā)現(xiàn)你的容器被撐破了。

當(dāng)然你會說，每個盒子的寬度不要設(shè)為 50%，可以設(shè)為 45%，然后為每個盒子再加一個 5% 的 padding，這是一個解決辦法，但我們在設(shè)計中經(jīng)常有這樣的習(xí)慣，雖然一段內(nèi)容的寬度可能不確定，但我們總喜歡它擁有固定 padding，我們并不希望 padding 自動適應(yīng)，況且，在很多時候，我們希望為一個自適應(yīng)寬度的盒子，設(shè)置一個 1 像素的 border，在這種情形，W3C 盒子模型將陷入困境。

而遇到這種情形，IE6 盒子模型不需要任何周折，你只管將每個盒子的寬度設(shè)置為 50%，它們會自動適應(yīng)容器的寬度，然后，不管你你怎樣設(shè)置 padding 和 border，都不會撐破你的容器。

W3C在盒子模型上迷途知返

雖然 W3C 永遠(yuǎn)都不會承認(rèn)，但他們顯然意識到了這個問題，重新定義盒子模型是不可能了，所以，在 CSS3 中，我們看到了下面這個屬性：

box-sizing

box-sizing 有兩個可選值，一個是默認(rèn)的 content-box 一個是 border-box，選用后者，盒子模型將按 IE6 的方式進(jìn)行處理。

到此，關(guān)于“IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章名稱：IE6與W3C標(biāo)準(zhǔn)的盒模型有哪些區(qū)別
網(wǎng)站網(wǎng)址：http://muchs.cn/article22/ghecjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站收錄、定制網(wǎng)站、網(wǎng)頁設(shè)計公司、手機(jī)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(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)