基于盒子模型的網(wǎng)頁布局方法研究

摘? 要：在使用XHTML+CSS技術(shù)對網(wǎng)頁進(jìn)行布局時，一般是將頁面中的各欄目按DIV盒子分塊，每個DIV里面的內(nèi)容也是由多個盒子模型所組成，盒子模型的使用對網(wǎng)頁的布局起著決定性的作用。

關(guān)鍵詞：盒子模型；網(wǎng)頁布局；CSS

中圖分類號：G642?????????? 文獻(xiàn)標(biāo)識碼：A

1?? 引言（Introduction）

任何HTML元素在頁面上都占據(jù)著一定的空間，我們都可以將這些HTML元素看成是盒子模型，所以，在對網(wǎng)頁進(jìn)行布局時，最為重要的就是盒子模型的使用。

2? 盒子模型的特征（Characteristics of the box

model）

（1）盒子的基本屬性

對于盒子模型而言，基本屬性包括：盒子的寬度（width）、高度（height）、邊框（border）、內(nèi)填充（padding）、外邊界（margin），如圖1所示[1]。

圖1 盒子的基本屬性

Fig.1 The basic properties of the box

在對網(wǎng)頁布局時，盒子的這幾個屬性就決定了盒子的大小。

（2）盒子模型之間的位置關(guān)系

盒子模型之間的關(guān)系要么是父子關(guān)系（體現(xiàn)在盒子之間是內(nèi)外包含關(guān)系時），要么是兄弟關(guān)系（兄弟關(guān)系的盒子可以上下排列、左右排列）。

（3）標(biāo)準(zhǔn)流下盒子模型的排列規(guī)則

在標(biāo)準(zhǔn)流下，也就是盒子沒有使用CSS定位時，所有的盒子模型按兩種方式排列，一種是兄弟盒子垂直排列（塊元素），一種是兄弟盒子水平排列（行內(nèi)元素）。

（4）盒子之間的間距

對于水平排列的盒子，它們之間的水平間距=左盒子的右margin+右盒子的左margin，如圖2所示。

圖2 水平排列的盒子

Fig.2 Horizontal arrangement of the box

對于垂直排列的盒子，它們之間的垂直間距=最大值（上盒子的下margin，下盒子的上margin），如圖3所示。

圖3 垂直排列的盒子

Fig.3 The vertical alignment of the box

對于父子盒子，它們邊框之間的水平間距=父盒子的左padding+子盒子左margin，垂直間距=父盒子的上padding+子盒子上margin，如圖4所示。

圖4 父子盒子的位置

Fig.4 Father and son of the location of the box

3? 運(yùn)用盒子模型布局網(wǎng)頁的技巧（Using the box

model webpage layout skills）

在運(yùn)用盒子模型布局網(wǎng)頁時，通常把網(wǎng)頁中的每個元素都可以看成一個盒子，將頁面在整體上按<；DIV>；標(biāo)記進(jìn)行分塊，然后對各個塊進(jìn)行CSS定位。而使用這種技術(shù)布局網(wǎng)頁時，只要掌握以下幾方面的設(shè)計技巧，布局中的主要問題都可以解決。

（1）盒子尺寸的計算

盒子整個區(qū)域的寬=width+padding（左、右）+margin（左、右）+border（左、右），盒子的區(qū)域

高=height+padding（上、下）+margin（上、下）+border（上、下）。所以，在考慮盒子的尺寸時，千萬不要忽略它的padding、margin、border值，如圖5所示[2]。

但是有一種情況是特例，當(dāng)盒子的padding、margin、border都等于0時，盒子整個區(qū)域的寬=width，盒子的區(qū)域

高=height。

圖5 盒子尺寸的計算

Fig.5 The box dimension calculation

（2）父子盒子之間位置關(guān)系的調(diào)整

如果我們在布局時，盒子之間的關(guān)系是父子包含關(guān)系，它們之間位置關(guān)系的調(diào)整可以通過以下兩種方法實現(xiàn)：

a.設(shè)置父盒子的padding值

當(dāng)我們把子盒子看成是父盒子的內(nèi)容是，可以通過設(shè)置父盒子的paddin-left或padding-top調(diào)整它們之間的位置關(guān)系，如圖6所示[3]。

圖6 父子盒子位置的調(diào)整（方法1）

Fig.6 Father and son box position adjustment（method 1）

b.設(shè)置子盒子的margin值

如果將父子盒子當(dāng)作是兩個獨立的盒子，又可以通過設(shè)置子盒子的margin-top或margin-left值改變它們之間的位置。但值得注意的是，在IE8下，如果子盒子是父盒子的第一項內(nèi)容，則子盒子的margin-top值會轉(zhuǎn)移到父盒子上，如圖7所示[1]。

圖7 父子盒子位置的調(diào)整（方法2）

Fig.7 Father and son box position adjustment（method 2）

運(yùn)用以上兩種方法時，在IE6下還有一個BUG：當(dāng)同時設(shè)置了父盒子的paddin-top和子盒子的margin-left后，子盒子的左邊界將不起作用。

（3）行內(nèi)元素的屬性限制

對于行內(nèi)容元素頁言，有一些屬性設(shè)置是無效的。

a.行內(nèi)元素的width屬性：對行內(nèi)元素設(shè)置width值是無效的，因為行內(nèi)元素的width是由它的內(nèi)容多少所決定的。endprint

b.行內(nèi)元素的height值：對行內(nèi)元素設(shè)置height值也是無效的，因為行內(nèi)元素的height是由它包含的內(nèi)容高度所決定的。

c.行內(nèi)元素的padding值和margin值：行內(nèi)元素設(shè)置padding和margin時，只中左、右有效，上、下設(shè)置無效。

d.行內(nèi)元素?zé)o法設(shè)置背景。

說明：以上行內(nèi)元素屬性設(shè)置中width、height、padding、margin的設(shè)置限制不包含特殊的行內(nèi)元素IMG。當(dāng)然，行內(nèi)元素與可以通過display屬性的設(shè)置實現(xiàn)與塊元素的相互轉(zhuǎn)換。

4? 運(yùn)用盒子模型布局網(wǎng)頁的流程（Using the box

model webpage process layout）

無論是何種布局結(jié)構(gòu)的網(wǎng)頁，其基本設(shè)計流程是一樣的，一般按以下步驟進(jìn)行：

（1）確定頁面的布局結(jié)構(gòu)并畫出結(jié)構(gòu)草圖。

在畫結(jié)構(gòu)草圖時，除了必要的欄目版塊以外，還必須給整個頁面添加一個盒子（通常命名為box），用于對頁面的整體效果進(jìn)行控制。

（2）通過HTML搭建頁面的結(jié)構(gòu)。

（3）設(shè)置初始化樣式。

a.清除所有元素默認(rèn)的padding、margin、border值，避免默認(rèn)值對設(shè)計結(jié)果產(chǎn)生影響。

b.設(shè)置整個頁面的居中。

①設(shè)置盒子的寬度（最外層的包含整個頁面內(nèi)容的盒子）。

②設(shè)置盒子的左右margin值都為auto。

③如果要兼容IE6及以下版本的瀏覽器，則要將body的對齊方式設(shè)置為center，頁面盒子的對齊方式設(shè)置為left。

（4）按照我們寫漢字的習(xí)慣逐步完成每個版塊的設(shè)置。

a.內(nèi)外包含關(guān)系的父子盒子，從外到內(nèi)。

b.上下結(jié)構(gòu)的版塊，先設(shè)置上版塊，再設(shè)計下版塊。

c.水平排列的版塊，按從左到右的順序進(jìn)行。

（5）先完成每個獨立版塊的設(shè)計，再調(diào)整不同版塊之間的位置關(guān)系。

5?? 結(jié)論（Conclusion）

運(yùn)用盒子模型布局網(wǎng)頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規(guī)范的設(shè)計流程實施操作，這樣，不管是結(jié)構(gòu)簡單還是結(jié)構(gòu)復(fù)雜的頁面，我們設(shè)計起來都會毫不費(fèi)力。

參考文獻(xiàn)（References）

[1] Jeff Croft，李方進(jìn).CSS實戰(zhàn)精粹[M].北京：電子工業(yè)出版社，

2007.

[2] 溫謙.CSS徹底研究[M].北京：人民郵電出版社，2008.

[3] 張曉晨.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領(lǐng)域：計算機(jī)網(wǎng)絡(luò).endprint

b.行內(nèi)元素的height值：對行內(nèi)元素設(shè)置height值也是無效的，因為行內(nèi)元素的height是由它包含的內(nèi)容高度所決定的。

c.行內(nèi)元素的padding值和margin值：行內(nèi)元素設(shè)置padding和margin時，只中左、右有效，上、下設(shè)置無效。

d.行內(nèi)元素?zé)o法設(shè)置背景。

說明：以上行內(nèi)元素屬性設(shè)置中width、height、padding、margin的設(shè)置限制不包含特殊的行內(nèi)元素IMG。當(dāng)然，行內(nèi)元素與可以通過display屬性的設(shè)置實現(xiàn)與塊元素的相互轉(zhuǎn)換。

4? 運(yùn)用盒子模型布局網(wǎng)頁的流程（Using the box

model webpage process layout）

無論是何種布局結(jié)構(gòu)的網(wǎng)頁，其基本設(shè)計流程是一樣的，一般按以下步驟進(jìn)行：

（1）確定頁面的布局結(jié)構(gòu)并畫出結(jié)構(gòu)草圖。

在畫結(jié)構(gòu)草圖時，除了必要的欄目版塊以外，還必須給整個頁面添加一個盒子（通常命名為box），用于對頁面的整體效果進(jìn)行控制。

（2）通過HTML搭建頁面的結(jié)構(gòu)。

（3）設(shè)置初始化樣式。

a.清除所有元素默認(rèn)的padding、margin、border值，避免默認(rèn)值對設(shè)計結(jié)果產(chǎn)生影響。

b.設(shè)置整個頁面的居中。

①設(shè)置盒子的寬度（最外層的包含整個頁面內(nèi)容的盒子）。

②設(shè)置盒子的左右margin值都為auto。

③如果要兼容IE6及以下版本的瀏覽器，則要將body的對齊方式設(shè)置為center，頁面盒子的對齊方式設(shè)置為left。

（4）按照我們寫漢字的習(xí)慣逐步完成每個版塊的設(shè)置。

a.內(nèi)外包含關(guān)系的父子盒子，從外到內(nèi)。

b.上下結(jié)構(gòu)的版塊，先設(shè)置上版塊，再設(shè)計下版塊。

c.水平排列的版塊，按從左到右的順序進(jìn)行。

（5）先完成每個獨立版塊的設(shè)計，再調(diào)整不同版塊之間的位置關(guān)系。

5?? 結(jié)論（Conclusion）

運(yùn)用盒子模型布局網(wǎng)頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規(guī)范的設(shè)計流程實施操作，這樣，不管是結(jié)構(gòu)簡單還是結(jié)構(gòu)復(fù)雜的頁面，我們設(shè)計起來都會毫不費(fèi)力。

參考文獻(xiàn)（References）

[1] Jeff Croft，李方進(jìn).CSS實戰(zhàn)精粹[M].北京：電子工業(yè)出版社，

2007.

[2] 溫謙.CSS徹底研究[M].北京：人民郵電出版社，2008.

[3] 張曉晨.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領(lǐng)域：計算機(jī)網(wǎng)絡(luò).endprint

b.行內(nèi)元素的height值：對行內(nèi)元素設(shè)置height值也是無效的，因為行內(nèi)元素的height是由它包含的內(nèi)容高度所決定的。

c.行內(nèi)元素的padding值和margin值：行內(nèi)元素設(shè)置padding和margin時，只中左、右有效，上、下設(shè)置無效。

d.行內(nèi)元素?zé)o法設(shè)置背景。

說明：以上行內(nèi)元素屬性設(shè)置中width、height、padding、margin的設(shè)置限制不包含特殊的行內(nèi)元素IMG。當(dāng)然，行內(nèi)元素與可以通過display屬性的設(shè)置實現(xiàn)與塊元素的相互轉(zhuǎn)換。

4? 運(yùn)用盒子模型布局網(wǎng)頁的流程（Using the box

model webpage process layout）

無論是何種布局結(jié)構(gòu)的網(wǎng)頁，其基本設(shè)計流程是一樣的，一般按以下步驟進(jìn)行：

（1）確定頁面的布局結(jié)構(gòu)并畫出結(jié)構(gòu)草圖。

在畫結(jié)構(gòu)草圖時，除了必要的欄目版塊以外，還必須給整個頁面添加一個盒子（通常命名為box），用于對頁面的整體效果進(jìn)行控制。

（2）通過HTML搭建頁面的結(jié)構(gòu)。

（3）設(shè)置初始化樣式。

a.清除所有元素默認(rèn)的padding、margin、border值，避免默認(rèn)值對設(shè)計結(jié)果產(chǎn)生影響。

b.設(shè)置整個頁面的居中。

①設(shè)置盒子的寬度（最外層的包含整個頁面內(nèi)容的盒子）。

②設(shè)置盒子的左右margin值都為auto。

③如果要兼容IE6及以下版本的瀏覽器，則要將body的對齊方式設(shè)置為center，頁面盒子的對齊方式設(shè)置為left。

（4）按照我們寫漢字的習(xí)慣逐步完成每個版塊的設(shè)置。

a.內(nèi)外包含關(guān)系的父子盒子，從外到內(nèi)。

b.上下結(jié)構(gòu)的版塊，先設(shè)置上版塊，再設(shè)計下版塊。

c.水平排列的版塊，按從左到右的順序進(jìn)行。

（5）先完成每個獨立版塊的設(shè)計，再調(diào)整不同版塊之間的位置關(guān)系。

5?? 結(jié)論（Conclusion）

運(yùn)用盒子模型布局網(wǎng)頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規(guī)范的設(shè)計流程實施操作，這樣，不管是結(jié)構(gòu)簡單還是結(jié)構(gòu)復(fù)雜的頁面，我們設(shè)計起來都會毫不費(fèi)力。

參考文獻(xiàn)（References）

[1] Jeff Croft，李方進(jìn).CSS實戰(zhàn)精粹[M].北京：電子工業(yè)出版社，

2007.

[2] 溫謙.CSS徹底研究[M].北京：人民郵電出版社，2008.

[3] 張曉晨.DIV+CSS網(wǎng)頁布局商業(yè)案例精粹[M].北京：電子工業(yè)

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領(lǐng)域：計算機(jī)網(wǎng)絡(luò).endprint