盒子模型是css中乙個重要的概念，是開發網頁必須要用的布局方法。盒子模型有兩種，分別是標準 w3c 盒子模型和 ie 盒子模型。
標準 w3c盒子模型：包括 magin（外邊距）、border（邊框）、padding（內邊距）、content（內容），並且 content 部分不包含其他部分。也就是說給該元素新增的任何padding，border，和magin屬性都會佔據空間。
在標準的盒子模型中，width 的值 = content 部分的寬度。增加內邊距 padding 、邊框 border 和外邊距 margin 不會影響內容區域的尺寸，但是會增加元素佔據的總尺寸，而盒子的實際大小受 padding 和 border 屬性的影響，如果想把這個盒子變成原來的大小，只要把盒子原來設定的寬高減去 padding 和 border 的對應值就行。
ie盒子模型：也包括 margin、border、padding、content，但其 content 部分包含了 border 和 padding。
在 ie 盒子模型中，width 的值 = content + padding + border 這三個部分的寬度。對於乙個盒子設定了外邊距 margin 後，看似沒有影響，只是增加了這個盒子的真實占用寬高，沒有影響盒子的實際大小。
例如：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px
如果用標準 w3c 盒子模型解釋，那麼這個盒子真實占有的寬度為：20*2 + 1*2 + 10*2 + 200 = 262px，盒子的實際大小為：寬 1*2 + 10*2 + 200 = 222px
若用 ie 盒子模型，那麼這個盒子真實占有的寬度為：20*2 + 200 = 240px，盒子的實際大小為：200px
那我們應該選擇哪中盒子模型呢？當然「標準 w3c 盒子模型」了。怎樣才算是選擇了「標準 w3c 盒子模型」呢？很簡單，就是在網頁的頂部加上 doctype 宣告。當我們寫了 宣告的時候，無論在哪種核心的瀏覽器下盒子模型都會被解析為標準盒模型。假如不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，即部分有ie核心的瀏覽器則會觸發 ie 盒子模型，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。
如果想要切換盒模型也很簡單，這就需要用到css3的 box-sizing 屬性，給想要變成ie盒子模型的元素新增 box-sizing：border-box，這樣我們再給元素新增 padding 及 border 屬性時，元素就會在我們設定的寬度和高度內自動調節，而不會再向外擴張。
語法：box-sizing:content-box | border-box | inherit;
content-box：預設值，在指定的寬度和高度之外繪製元素的內邊距和邊框，即 border 和 padding 不計入 width 之內，總寬度width = margin + border + padding + content；
border-box：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，盒子的width 包含了 border 和 padding，即總寬度 width = margin + content，需要從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度，這使得我們更容易的去設定乙個元素的寬高，也省去了一次又一次的加加減減。
inherit：從父元素繼承 box-sizing 屬性的值。
CSS盒子模型以及CSS3中的box sizing
css中的盒模型一般分為標準w3c盒模型和ie盒模型。css盒模型 box model 規定了元素框處理元素內容 內邊距 邊框 和外邊距的方式。下圖說明了盒子模型 元素框的最內部分是實際的內容 content 直接包圍內容的是內邊距 padding 內邊距呈現了元素的背景。內邊距的邊緣是邊框 bor...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...