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

在頁(yè)面設(shè)計(jì)中有4個(gè)常見屬性：content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距），我們把這4部分轉(zhuǎn)化成日常生活的盒子來(lái)理解，所以稱為盒子模型。

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

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

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

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