CSS盒子模型的概念

一、“盒子”與“模型”的概念

       在網頁布局中，為了能夠在紛繁復雜的各個部分合理地進行組織，這個領域的一些有識之士對它的本質進行充分研究后，總結了一套完整的、行之有效的原則和規范。這就是“盒子模型”的由來。
       所有頁面中的元素都可以看成是一個盒子，占據著一定的頁面空間，一般來說這些被占據的空間往往都要比單純的內容大。換句話說，可以通過調整盒子的邊框和距離等參數，來調節盒子的位置和大小。如圖17—1所示，在CSS中，一個獨立的盒子模型由content(內容)、padding內邊距)、border(邊框)和margin(外邊距)4部分組成。

二、內容區

        內容區是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他的3部分都是可選的。內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度，其值可以是長度值或百分比值。
        當內容信息太多，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。當overflow屬性值為hidden時，溢出部分將不可見；為visible時，溢出的內容信息可見，只是被呈現在盒子的外部；當為scroll時，滾動條將被自動添加到盒子中，用戶可以滾動顯示內容售息；當為auto時，將由瀏覽器決定如何處理溢出部分。

三、內邊距

        內邊距是內容區和邊框之間的空間，可以被看做是內容區的背景區域=內邊距的屬性有5種，即padding-top、padding．bottom、padding-left、padding-fight以及綜合了以上4種方向的快捷內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框間的距離。同時通過對盒子背景色屬性的設置可以使內邊距部分呈現相應的顏色，起到一定的邊線效果。

四、邊框

       邊框的屬性有border-style、border-width和border-color以及綜合了以上3類屬性的快捷邊框屬性border。
       邊框樣式屬性border-style是邊框最重要的屬性，CSS規定了dotted、solid等邊框樣式。使用邊框寬度屬性border-width可以為邊框指定具體的厚度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium和thick。使用邊框顏色屬性可以為邊框指定相應的顏色，其屬性值可以是RGB值，也可以是CSS規定的顏色名。

五、外邊距
       外邊距位于盒子的最外圍，它不是一條邊線，而是添加在邊框外面的空間。外邊距使元素盒子之間不必緊湊地連接在一起，是CSS布局的一個重要手段。外邊距的屬性有5種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4種方向的快捷外邊距屬性margin，其具體的設置和使用與內邊距屬性類似。
       同時，CSS允許給外邊距屬性指定負數值，當指定負外邊距值時，整個盒子將向指定負值方向的相反方向移動，以此可以產生盒子的重疊效果。采用指定外邊距正負值的方法可以移動網頁中的元素，這是CSS布局技術中的一個重要方法。