網(wǎng)頁中盒子模型的應(yīng)用及常見問題

程琳琳

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

1 引言

在網(wǎng)頁設(shè)計(jì)中，一個(gè)頁面的布局是非常重要的。一個(gè)精美的網(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)頁。對于盒子模型，需掌握以下幾個(gè)基本內(nèi)容。

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

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

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

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

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

2.1 盒子模型的概念

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

以某個(gè)元素為例，盒子模型的結(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)成為例。一個(gè)完整的鞋盒子通常包含鞋子、填充物和裝鞋的鞋盒。如果把鞋子視為HTML元素，那鞋盒子就相當(dāng)于一個(gè)CSS盒子模型。其中，鞋子類似于CSS盒子模型的內(nèi)容，填充物的厚度類似于CSS盒子模型的內(nèi)邊距，鞋盒的厚度類似于CSS盒子模型的邊框。當(dāng)多個(gè)鞋盒放在一起時(shí)，它們之間的距離就類似于CSS盒子模型的外邊距。

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

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

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

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

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

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

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

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

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

圖2

4 盒子模型常見問題

4.1 盒子模型實(shí)際寬度高度的計(jì)算

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

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

4.2 盒子模型外邊距使用的注意事項(xiàng)

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

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

5 結(jié)語

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