盒子模型的理解

標準盒子模型

從上圖可以看到標準 w3c 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。

ie 盒子模型

從上圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：乙個容器的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那麼這個容器需要佔據的位置為：寬20*2+1*2+10*2+200=262px、高20*2+1*2+10*2+50=112px，盒子的實際大小為：寬1*2+10*2+200=222px、高1*2+10*2+50=72px；假如用ie 盒子模型，那麼容器需要佔據的位置為：寬20*2+200=240px,高20*2+50=90px,盒子的實際大小為：寬 200px、高 50px。

在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。

那我們開發的時候選擇哪中盒子模型呢？

肯定是「標準 w3c 盒子模型」。怎麼樣才算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上 doctype 宣告。假如不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype 宣告，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

所以為了讓網頁能相容各個瀏覽器，讓我們用標準 w3c 盒子模型。

box-sizing屬性允許您以特定的方式定義匹配某個區域的特定元素。

box-sizing有兩個值乙個是content-box，另乙個是border-box。

當設定為box-sizing:content-box時，將採用*標準模式*解析計算，也是預設模式；

當設定為box-sizing:border-box時，將採用*怪異模式*解析計算；

目前使用此屬性需要字首如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

例如，假如您需要併排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器以怪異模式呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

盒子模型的理解

盒子模型理解

盒子模型的理解

盒子模型的理解

相關推薦