盒子模型的理解

概述

• 網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具有這些屬性，也主要是這些屬性。

• 這些屬性咱們能夠把它轉移到咱們平常生活中的盒子(箱子)上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模型。

• CSS盒子模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。

• 盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同。

標準盒子模型

從上圖能夠看到標準 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 盒子模型。

CSS3 box-sizing 屬性

定義和用法

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"。這可令瀏覽器以怪異模式呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。