CSS盒子模型的內部結構

CSS 3中，所有的頁面元素都包含在一個矩形框內，稱為盒子。盒子描述了元素及其屬性在頁面布局中所占的空間大小。

在頁面設計中有4個常見屬性：content（內容）、padding（內邊距）、border（邊框）和margin（外邊距），我們把這4部分轉化成日常生活的盒子來理解，所以稱為盒子模型。

content（內容）就是盒子里裝的東西，padding（內邊距）就是怕盒子里裝的東西損壞而添加的泡沫或者其他抗震防擠壓的輔料，border（邊框）就是盒子本身了，margin（外邊距）則說明盒子擺放的時候不能全部堆在一起，要留一定空隙。

在網頁設計中，content常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），padding只有寬度屬性，可以理解為真實盒子中抗震輔料的厚度，而border有大小和顏色之分，又可以理解為真實盒子的厚度以及這個盒子的顏色或材料，margin就是該盒子與其他東西要保留多大距離，如圖所示：

從上圖可以看出，盒子的概念不難理解，但是如果需要精確排版，甚至1個像素都不差，這就需要非常精確地理解其中的計算方法。

一個盒子實際所占有的寬度（或高度）是由“內容+內邊距+邊框+外邊距”組成的。在CSS中可以通過設置width和height的值來控制內容所占矩形的大小，并且對于任何一個盒子，都可以分別設定4條邊各自的border、padding和margin，如下圖所示。因此只要利用好這些屬性，就能夠實現(xiàn)各種各樣的排版效果。