所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的說明了盒子模型(box model)：
不同部分的說明：
為了正確設定元素在所有瀏覽器中的寬度和高度，需要知道盒模型是如何工作的。
當指定乙個css元素的寬度和高度屬性時，只是設定內容區域的寬度和高度。要知道，完全大小的元素，還必須新增填充，邊框和邊距。
下面的例子中的元素的總寬度為300px：
div
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 盒子模型 Box Model
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 不同部分的說明...
CSS盒子模型（Box Model）
作為css的重點，三大模組之一的盒子模型，這部分無論如何也要精通透徹。在任何乙個網頁當中，都有自己的布局方式，所謂網頁布局方式就是如何把網頁裡面的文字 很好的排版成美工設計的樣式，這時文字就如同牛奶需要用盒子裝起來，然後可以隨意的擺放它的位置。來看張圖，體會下盒子模型。其實,所有的標籤都會生成乙個矩...
CSS的盒子模型（Box Model）
盒子模型 box model 是 css 的核心，現代 web 布局設計簡單說就是一堆盒子的排列與巢狀，掌握了盒子模型與它們的擺放控制，會發現再複雜的頁面也不過如此。然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來自 ie6，一種來自w3c 標準瀏覽器。盒子模型 下圖就是乙個典型的盒子...