在css中，盒子模型有w3c標準盒子模型和ie盒子模型兩種，這裡所談的是基於w3c標準的盒子模型。
所有html元素都可以看作盒子，即所有html標籤都支援盒子模型的屬性，在css中，"box model"這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。
同時我們可以發現，該元素的寬度和高度是內容的寬度和高度。
內邊距、邊框和外邊距都是可選的，預設值是零。同時可以使用通用選擇器對所有元素進行設定：
*元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性。
如果您希望所有 h1 元素的各邊都有 10 畫素的內邊距，只需要這樣：
h1您還可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1也通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
每個邊框有 3 個方面：寬度、樣式，以及顏色。
樣式： 寬度：
顏色：使用方式和內邊距一致。
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的「空白」。設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
與內邊距的設定相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：
margin: top right bottom left另外，還可以為 margin 設定乙個百分比數值：
p百分數是相對于父元素的 width 計算的。上面這個例子為 p 元素設定的外邊距是其父元素的 width 的 10%。
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
同時需要注意：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
更多的資訊請參考：
HTML5學習筆記一 簡單學習HTML5
html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...
HTML5學習筆記一 簡單學習HTML5
html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...
html5學習筆記
html5 1 文件宣告dtd 設定文件型別 使得瀏覽器按照標準模式 w3c標準 渲染網頁 否則瀏覽器按照自定義的怪異模式渲染網頁 2 結構標籤 本質上都是div標籤，但是有意義，3 canvas 凡是路徑圖形，開始畫之前要beginpath 畫完要closepath 定義縮寫 the prc wa...