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

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

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

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

1?? 引言（Introduction）

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

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

model）

（1）盒子的基本屬性

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

圖1 盒子的基本屬性

Fig.1 The basic properties of the box

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

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

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

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

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

（4）盒子之間的間距

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

圖2 水平排列的盒子

Fig.2 Horizontal arrangement of the box

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

圖3 垂直排列的盒子

Fig.3 The vertical alignment of the box

對(duì)于父子盒子，它們邊框之間的水平間距=父盒子的左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)頁時(shí)，通常把網(wǎng)頁中的每個(gè)元素都可以看成一個(gè)盒子，將頁面在整體上按<；DIV>；標(biāo)記進(jìn)行分塊，然后對(duì)各個(gè)塊進(jìn)行CSS定位。而使用這種技術(shù)布局網(wǎng)頁時(shí)，只要掌握以下幾方面的設(shè)計(jì)技巧，布局中的主要問題都可以解決。

（1）盒子尺寸的計(jì)算

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

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

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

高=height。

圖5 盒子尺寸的計(jì)算

Fig.5 The box dimension calculation

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

如果我們?cè)诓季謺r(shí)，盒子之間的關(guān)系是父子包含關(guān)系，它們之間位置關(guān)系的調(diào)整可以通過以下兩種方法實(shí)現(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)作是兩個(gè)獨(dú)立的盒子，又可以通過設(shè)置子盒子的margin-top或margin-left值改變它們之間的位置。但值得注意的是，在IE8下，如果子盒子是父盒子的第一項(xiàng)內(nèi)容，則子盒子的margin-top值會(huì)轉(zhuǎn)移到父盒子上，如圖7所示[1]。

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

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

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

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

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

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

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

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

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

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

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

model webpage process layout）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2007.

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

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

出版社，2007.

作者簡(jiǎn)介：

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

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

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

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

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

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

model webpage process layout）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2007.

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

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

出版社，2007.

作者簡(jiǎn)介：

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

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

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

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

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

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

model webpage process layout）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2007.

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

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

出版社，2007.

作者簡(jiǎn)介：

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