基于盒子模型的網頁布局方法研究

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

關鍵詞：盒子模型；網頁布局；CSS

中圖分類號：G642?????????? 文獻標識碼：A

1?? 引言（Introduction）

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

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

model）

（1）盒子的基本屬性

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

圖1 盒子的基本屬性

Fig.1 The basic properties of the box

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

（2）盒子模型之間的位置關系

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

（3）標準流下盒子模型的排列規則

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

（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? 運用盒子模型布局網頁的技巧（Using the box

model webpage layout skills）

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

（1）盒子尺寸的計算

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

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

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

高=height。

圖5 盒子尺寸的計算

Fig.5 The box dimension calculation

（2）父子盒子之間位置關系的調整

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

a.設置父盒子的padding值

當我們把子盒子看成是父盒子的內容是，可以通過設置父盒子的paddin-left或padding-top調整它們之間的位置關系，如圖6所示[3]。

圖6 父子盒子位置的調整（方法1）

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

b.設置子盒子的margin值

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

圖7 父子盒子位置的調整（方法2）

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

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

（3）行內元素的屬性限制

對于行內容元素頁言，有一些屬性設置是無效的。

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

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

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

d.行內元素無法設置背景。

說明：以上行內元素屬性設置中width、height、padding、margin的設置限制不包含特殊的行內元素IMG。當然，行內元素與可以通過display屬性的設置實現與塊元素的相互轉換。

4? 運用盒子模型布局網頁的流程（Using the box

model webpage process layout）

無論是何種布局結構的網頁，其基本設計流程是一樣的，一般按以下步驟進行：

（1）確定頁面的布局結構并畫出結構草圖。

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

（2）通過HTML搭建頁面的結構。

（3）設置初始化樣式。

a.清除所有元素默認的padding、margin、border值，避免默認值對設計結果產生影響。

b.設置整個頁面的居中。

①設置盒子的寬度（最外層的包含整個頁面內容的盒子）。

②設置盒子的左右margin值都為auto。

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

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

a.內外包含關系的父子盒子，從外到內。

b.上下結構的版塊，先設置上版塊，再設計下版塊。

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

（5）先完成每個獨立版塊的設計，再調整不同版塊之間的位置關系。

5?? 結論（Conclusion）

運用盒子模型布局網頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規范的設計流程實施操作，這樣，不管是結構簡單還是結構復雜的頁面，我們設計起來都會毫不費力。

參考文獻（References）

[1] Jeff Croft，李方進.CSS實戰精粹[M].北京：電子工業出版社，

2007.

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

[3] 張曉晨.DIV+CSS網頁布局商業案例精粹[M].北京：電子工業

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領域：計算機網絡.endprint

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

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

d.行內元素無法設置背景。

說明：以上行內元素屬性設置中width、height、padding、margin的設置限制不包含特殊的行內元素IMG。當然，行內元素與可以通過display屬性的設置實現與塊元素的相互轉換。

4? 運用盒子模型布局網頁的流程（Using the box

model webpage process layout）

無論是何種布局結構的網頁，其基本設計流程是一樣的，一般按以下步驟進行：

（1）確定頁面的布局結構并畫出結構草圖。

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

（2）通過HTML搭建頁面的結構。

（3）設置初始化樣式。

a.清除所有元素默認的padding、margin、border值，避免默認值對設計結果產生影響。

b.設置整個頁面的居中。

①設置盒子的寬度（最外層的包含整個頁面內容的盒子）。

②設置盒子的左右margin值都為auto。

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

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

a.內外包含關系的父子盒子，從外到內。

b.上下結構的版塊，先設置上版塊，再設計下版塊。

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

（5）先完成每個獨立版塊的設計，再調整不同版塊之間的位置關系。

5?? 結論（Conclusion）

運用盒子模型布局網頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規范的設計流程實施操作，這樣，不管是結構簡單還是結構復雜的頁面，我們設計起來都會毫不費力。

參考文獻（References）

[1] Jeff Croft，李方進.CSS實戰精粹[M].北京：電子工業出版社，

2007.

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

[3] 張曉晨.DIV+CSS網頁布局商業案例精粹[M].北京：電子工業

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領域：計算機網絡.endprint

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

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

d.行內元素無法設置背景。

說明：以上行內元素屬性設置中width、height、padding、margin的設置限制不包含特殊的行內元素IMG。當然，行內元素與可以通過display屬性的設置實現與塊元素的相互轉換。

4? 運用盒子模型布局網頁的流程（Using the box

model webpage process layout）

無論是何種布局結構的網頁，其基本設計流程是一樣的，一般按以下步驟進行：

（1）確定頁面的布局結構并畫出結構草圖。

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

（2）通過HTML搭建頁面的結構。

（3）設置初始化樣式。

a.清除所有元素默認的padding、margin、border值，避免默認值對設計結果產生影響。

b.設置整個頁面的居中。

①設置盒子的寬度（最外層的包含整個頁面內容的盒子）。

②設置盒子的左右margin值都為auto。

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

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

a.內外包含關系的父子盒子，從外到內。

b.上下結構的版塊，先設置上版塊，再設計下版塊。

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

（5）先完成每個獨立版塊的設計，再調整不同版塊之間的位置關系。

5?? 結論（Conclusion）

運用盒子模型布局網頁，必須完全了解盒子模型的基本特性及盒子尺寸的計算方法，熟悉盒子之間位置的控制技巧，再按照規范的設計流程實施操作，這樣，不管是結構簡單還是結構復雜的頁面，我們設計起來都會毫不費力。

參考文獻（References）

[1] Jeff Croft，李方進.CSS實戰精粹[M].北京：電子工業出版社，

2007.

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

[3] 張曉晨.DIV+CSS網頁布局商業案例精粹[M].北京：電子工業

出版社，2007.

作者簡介：

孫小英（1973-），女，碩士，副教授.研究領域：計算機網絡.endprint