如何理解盒模型及其content、padding、border、margin？
當對一個文件進行佈局(laying out)的時候，瀏覽器渲染引擎會根據CSS-Box模型（CSS Basic Box model）將所有元素表示為一個矩形盒子（box)。CSS決定這些盒子的大小，位置以及屬性（顏色，背景，邊框尺寸…).
一.CSS標準盒子模型
。
1. 內容區域content
內容區域content area 是包含元素真實內容的區域。它通常包含背景、顏色或者圖片等，位於內容邊界的內部，它的大小為內容寬度 或 content-box寬及內容高度或content-box高。
如果 box-sizing 為預設值， width, min-width, max-width, height, min-height 與 max-height 控制內容大小。
2. 內邊距區域padding
內邊距區域padding area 延伸到包圍padding的邊框。如果內容區域content area設定了背景、顏色或者圖片，這些樣式將會延伸到padding上(而不僅僅是作用於內容區域)。它位於內邊距邊界內部, 它的大小為 padding-box 寬與 padding-box 高。
內邊距與內容邊界之間的空間可以由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding 控制。
3. 邊框區域border
邊框區域border area 是包含邊框的區域，擴充套件了內邊距區域。它位於邊框邊界內部，大小為 border-box 寬和 border-box 高。由 border-width 及簡寫屬性 border控制。
4. 外邊距區域margin
外邊距區域margin area用空白區域擴充套件邊框區域，以分開相鄰的元素。它的大小為 margin-box 的高寬。
外邊距區域大小由 margin-top, margin-right, margin-bottom, margin-left 及簡寫屬性 margin 控制。
注意:
在外邊距合併 的情況下，由於盒之間共享外邊距，外邊距不容易弄清楚。
對於非替換的行內元素來說，儘管內容周圍存在內邊距與邊框，但其佔用空間（行高）由 line-height 屬性決定。
二. 瀏覽器相容
一旦為頁面設定了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
IE8 及更早IE版本不支援設定填充的寬度和邊框的寬度屬性。
解決IE8及更早版本不相容問題可以在HTML頁面宣告<!DOCTYPE html>即可。
更為清爽的瀏覽體驗,請移步我的個人部落格 天心天地生的個人部落格
技能樹.IT修真院 “我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。 這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~ 憑邀請碼註冊可享受學費減免優惠 我的邀請碼：25344308 ，或者你可以直接點選此連結： 修真院註冊連結