程琳琳

（廣東交通職業(yè)技術(shù)學(xué)院 廣東省廣州市 510650）

1 引言

在網(wǎng)頁設(shè)計中，一個頁面的布局是非常重要的。一個精美的網(wǎng)頁不僅僅是依靠圖文并茂的視覺展示，更重要的是網(wǎng)頁的框架和布局，合理的布局能讓用戶更好地接受網(wǎng)頁信息。例如，我們所熟知的淘寶、京東等網(wǎng)站，雖然頁面的內(nèi)容很多，但是總體給人的感覺是整齊，美觀的。這正是頁面布局合理的效果。

盒子模型是CSS網(wǎng)頁布局的基礎(chǔ)，也是CSS布局的基本思想，在網(wǎng)頁制作中的應(yīng)用十分廣泛[1]。我們需掌握盒子模型的各類特征與規(guī)律，才能更好地控制各種元素在網(wǎng)頁中的顯示效果。CSS盒子模型屬于網(wǎng)頁制作中CSS布局的重要技術(shù)。在網(wǎng)頁制作過程中，合理地利用盒子模型，有助于制作更加美觀、合理的網(wǎng)頁。對于盒子模型，需掌握以下幾個基本內(nèi)容。

（1）理解CSS盒子模型的概念及原理。

（2）掌握CSS盒子模型的相關(guān)屬性。

（3）掌握CSS盒子模型的應(yīng)用及相關(guān)常見問題。

本文也將圍繞這幾個知識點為初學(xué)者提供參考。

2 盒子模型的概念及其屬性

2.1 盒子模型的概念

盒子模型，即把網(wǎng)頁中的各種元素視為一個矩形的盒子，類似于一個容納物體的容器。每個盒子的構(gòu)成包括元素的內(nèi)容、外邊距，內(nèi)邊距及邊框。

以某個元素為例，盒子模型的結(jié)構(gòu)如圖1所示[2]。標(biāo)記為content區(qū)域是盒子的內(nèi)容部分，盒子邊框區(qū)域標(biāo)記為border。內(nèi)邊距為內(nèi)容與邊框之間的距離，也就是標(biāo)記padding這塊區(qū)域。盒子外邊距區(qū)域標(biāo)記為margin，即該元素與其相鄰元素之間的距離。

圖1

為幫助初學(xué)者更形象地認(rèn)識CSS盒子模型，此處以生活中常見的鞋盒子的構(gòu)成為例。一個完整的鞋盒子通常包含鞋子、填充物和裝鞋的鞋盒。如果把鞋子視為HTML元素，那鞋盒子就相當(dāng)于一個CSS盒子模型。其中，鞋子類似于CSS盒子模型的內(nèi)容，填充物的厚度類似于CSS盒子模型的內(nèi)邊距，鞋盒的厚度類似于CSS盒子模型的邊框。當(dāng)多個鞋盒放在一起時，它們之間的距離就類似于CSS盒子模型的外邊距。

CSS網(wǎng)頁布局應(yīng)用的就是盒子模型的思想。從瀏覽器的角度來看，多個盒子嵌套排列就構(gòu)成了一個網(wǎng)頁。比如整個一個大網(wǎng)頁，把網(wǎng)頁中的logo，導(dǎo)航條，主體部分，版權(quán)等都想象成一個個的盒子，然后把這些盒子像搭積木一樣搭起來，這樣一個網(wǎng)頁的版面就出來了。

2.2 盒子模型的相關(guān)屬性

要想更好地控制頁面中每個盒子的顯示效果及樣式，需要掌握盒子模型的相關(guān)屬性。盒子模型的主要屬性包括：Width, height,Border, Padding, margin。

Width屬性用于設(shè)置盒子內(nèi)容的寬度，height屬性用于設(shè)置盒子內(nèi)容的高度。Border屬性用于設(shè)置盒子的邊框樣式，邊框?qū)挾燃斑吙蝾伾?。?nèi)邊距由Padding屬性設(shè)置，包括上右下左四個內(nèi)邊距。外邊距由margin屬性設(shè)置，同樣包括上右下左四個外邊距。

3 盒子模型在網(wǎng)頁設(shè)計中的實際應(yīng)用舉例

本文以一個簡單網(wǎng)頁元素——段落P為例，淺析盒子模型在網(wǎng)頁中的應(yīng)用。段落P在網(wǎng)頁中也可以看作是一個簡單的盒子模型。

新建一個HTML頁面，在頁面中添加一個段落。因為網(wǎng)頁中所有的元素與對象都可以看作是一個盒子模型，所以，此處段落P標(biāo)記就把它當(dāng)做是一個盒子。段落里的文字相當(dāng)于盒子的內(nèi)容?？梢酝ㄟ^設(shè)置盒子相關(guān)屬性，來對段落進(jìn)行控制。

先給盒子一個邊框，使用border屬性，設(shè)置邊框的樣式為14像素，實線，紅色。此時，邊框會緊貼在文字邊緣。再設(shè)置盒子內(nèi)容的寬度為150像素，高度為50像素，盒子的內(nèi)容則以設(shè)置的寬高來顯示。給盒子一個內(nèi)邊距30像素，則盒子的內(nèi)容和邊框之間多了30個像素的距離。再給盒子一個外邊距20像素，則盒子的邊框與頁面其他元素之間多了20個像素的距離。預(yù)覽在瀏覽器，此時P就呈現(xiàn)出矩形的盒子效果。相應(yīng)案例代碼如下。

在制作網(wǎng)頁的過程中，有時我們需要知道網(wǎng)頁中盒子模型各個部分的大小。該如何得到這些值？顯然，用目測的方法不能得到準(zhǔn)確的數(shù)據(jù)。這里我們可以通過瀏覽器的調(diào)試工具，查看盒子模型的設(shè)置。具體的操作是，在瀏覽器頁面中，鼠標(biāo)右鍵選擇檢查元素選項。找到盒子的HTML代碼。比如，此時我們選擇代碼中的“＜p>盒子內(nèi)容＜/p>”。對應(yīng)地，右邊就會顯示我們盒子模型P的具體設(shè)置，包括盒子內(nèi)容的大小，邊框的大小及內(nèi)外邊距的大小。具體如圖2所示。當(dāng)我們把光標(biāo)定位在盒子模型的具體數(shù)值上時，還可以直接修改相應(yīng)數(shù)據(jù)，并直觀的在網(wǎng)頁中查看到相應(yīng)的頁面效果，十分方便。

圖2

4 盒子模型常見問題

4.1 盒子模型實際寬度高度的計算

在CSS樣式里邊，元素的width和height屬性僅僅指的是塊級元素內(nèi)容的寬度和高度。而不是整個盒子的寬度高度。

在CSS規(guī)范中，一個盒子在頁面中所占的高度與寬度包括了內(nèi)容，邊框和內(nèi)外邊距的值。即，盒子模型的總高度為：height，上下內(nèi)邊距，上下邊框及上下外邊距之和。同理，盒子模型的總寬度為：width，左右內(nèi)邊距，左右邊框及左右外邊距之和[3]。

4.2 盒子模型外邊距使用的注意事項

當(dāng)多個盒子垂直或嵌套排布時，需注意可能會出現(xiàn)外邊距合并的情況。例如，在標(biāo)準(zhǔn)文檔流中，當(dāng)一個盒子出現(xiàn)在另一個盒子上邊時，上盒子的下外邊距margin-bottom與下盒子的上外邊距margin-top就會發(fā)生合并。也就是說此時，兩個盒子之間的外邊距，并不是margin-bottom與margin-top之和。兩個盒子之間的外邊距等于兩個外邊距中的較大者。下邊這個具體的案例代碼正說明了這一點。

上述案例代碼中，上盒子的margin-bottom與下盒子的margintop就會發(fā)生合并。在網(wǎng)頁中預(yù)覽的時候，我們會發(fā)現(xiàn)兩個盒子之間的外邊距是30px，而不是40px。在網(wǎng)頁的制作過程中，初學(xué)者有時會發(fā)現(xiàn)，已經(jīng)加多了margin-top或margin-bottom的值，但相應(yīng)的盒子卻沒有發(fā)生位置的變化，原因便多是源自于此。

5 結(jié)語

隨著信息時代的發(fā)展，網(wǎng)頁設(shè)計技術(shù)也日新月異[4]。如今，DIV+CSS技術(shù)是網(wǎng)頁布局的主流技術(shù)。而盒子模型是DIV+CSS布局技術(shù)的基礎(chǔ)。將盒子模型應(yīng)用于網(wǎng)頁的布局，可實現(xiàn)單列布局，雙列布局，三列布局等。合理使用盒子模型進(jìn)行網(wǎng)頁布局可令網(wǎng)頁更加美觀更加有條理。