CSS盒子模型的概念

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

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

二、內(nèi)容區(qū)

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

三、內(nèi)邊距

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

四、邊框

       邊框的屬性有border-style、border-width和border-color以及綜合了以上3類屬性的快捷邊框?qū)傩詁order。
       邊框樣式屬性border-style是邊框最重要的屬性，CSS規(guī)定了dotted、solid等邊框樣式。使用邊框?qū)挾葘傩詁order-width可以為邊框指定具體的厚度，其屬性值可以是長(zhǎng)度計(jì)量值，也可以是CSS規(guī)定的thin、medium和thick。使用邊框顏色屬性可以為邊框指定相應(yīng)的顏色，其屬性值可以是RGB值，也可以是CSS規(guī)定的顏色名。

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