本文和大家重點(diǎn)討論一下DIV+CSS如何創(chuàng)建固定寬度布局，這種方法與打印布局非常接近，對于包含很多大圖片和其它元素的內(nèi)容，由于它們在流式布局中不能很好地表現(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。

固定寬度布局Div+CSS如何創(chuàng)建

用XHTML和CSS實(shí)現(xiàn)兩列或三列頁面布局的各個(gè)方面。到目前為止，所有例子都使用流式布局（也就是布局會(huì)自動(dòng)擴(kuò)展和適應(yīng)瀏覽器窗口的寬度）?，F(xiàn)在是時(shí)候考慮另外一種主要的頁面布局方法了，這種布局方法是固定寬度布局。

很多Web構(gòu)建人員傾向于使用固定寬度的布局進(jìn)行頁面設(shè)計(jì)，因?yàn)樗鼈兡苌删_且可預(yù)知的結(jié)果。這種方法與打印布局非常接近，對于設(shè)計(jì)人員和訪問者來說都是一個(gè)很重要的舒適因素；另外，對于包含很多大圖片和其它元素的內(nèi)容，由于它們在流式布局中不能很好地表現(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。

從table到div

近年來，設(shè)計(jì)人員都使用表（table）來創(chuàng)建固定寬度的布局。表的列和行是對設(shè)計(jì)人員的布局表格（grid）的一種可行的模擬，所以一點(diǎn)也不奇怪設(shè)計(jì)人員為什么采用HTML表來完成頁面布局。

然而，基于表的布局有一個(gè)明顯的問題。除了語義上不適合用表來進(jìn)行布局之外，產(chǎn)生的代碼也很混亂，難于閱讀，甚至難于維護(hù)——尤其是在包含合并的表單元格（cell）和嵌套表時(shí)。

使用div進(jìn)行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會(huì)更快，也更易于處理。

表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因?yàn)橹付ㄟ@些元素的尺寸相當(dāng)簡單。其實(shí)通過div可以做到同樣的事情，只要確定div精確的維數(shù)并使用絕對和相對定位將這些div定位到頁面上即可。

一個(gè)典型的固定寬度的布局，該布局由頂部的一個(gè)標(biāo)題，一個(gè)三列內(nèi)容的區(qū)域（主內(nèi)容列，每側(cè)有一個(gè)工具條），和頁面底部的一個(gè)頁腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發(fā)布變化時(shí)它們的尺寸都不會(huì)變化。

以下是將頁面設(shè)計(jì)為固定寬度布局的CSS代碼。

ExampleSourceCode

body{  
font-family:Verdana,Arial,Helvetica,sans-serif;  
font-size:12px;  
margin:0px;  
padding:0px;  
}  
h2,h3{  
margin-top:0px;  
padding-top:0px;  
}  
div#head{  
position:absolute;  
width:750px;  
height:100px;  
left:0px;  
top:0px;  
background-color:#FFFF66;  
}  
div#columns{  
position:relative;  
width:750px;  
top:100px;  
background-color:#CCCCCC;  
}  
div#side1{  
position:absolute;  
width:150px;  
top:0px;  
left:0px;  
background-color:#FF6666;  
}  
div#content{  
position:relative;  
width:450px;  
top:0px;  
left:150px;  
background-color:#999999;  
}  
div#side2{  
position:absolute;  
width:150px;  
top:0px;  
left:600px;  
background-color:#00FF66;  
}  
div#foot{  
position:relative;  
width:750px;  
clear:both;  
margin-top:100px;  
background-color:#99FFFF;  
}  
 

 #p#

分解代碼

這段標(biāo)記并不是特別地值得注意——只是在每個(gè)主要頁面元素的外面（標(biāo)題、頁腳、工具條和主內(nèi)容）包圍著div。每個(gè)div有一個(gè)id，相應(yīng)的CSS樣式可以使用這個(gè)id引用它。只有一個(gè)額外的div（divid="columns"）包圍著三列內(nèi)容區(qū)域。在InternetExplorer中將頁腳放在三列中最長一列的下面是必要的。

像平時(shí)用法一樣，CSS代碼完成所有的重要任務(wù)。首先它完成一些家務(wù)管理。Body樣式將頁面的邊距設(shè)為零，h2,h3樣式將默認(rèn)間距設(shè)為零。否則的話，這該布局周圍就會(huì)有一個(gè)邊距，而在某些瀏覽器（比如Netscape和Mozilla）中標(biāo)題將會(huì)在在主內(nèi)容和頁腳的上面產(chǎn)生一個(gè)空白區(qū)域。

◆樣式div#head為標(biāo)題div設(shè)置一個(gè)明確的高度和寬度。標(biāo)題使用position:absolute,top:0px和left:0px規(guī)則顯式地定位在頁面的左上角。規(guī)則position:absolute是非常重要的，因?yàn)槎ㄎ粚傩裕╰op、left、right、bottom）在常規(guī)（靜態(tài)）定位時(shí)會(huì)被忽略。然而要記住，任何絕對定位的元素都會(huì)從常規(guī)的頁面流中被移除掉，而屬于頁面流的元素將會(huì)像絕對定位元素不存在一樣被定位到頁面上。

◆樣式div#columns控制div的格式，使其充當(dāng)三個(gè)列的容器。它使用position:relative創(chuàng)建屬于常規(guī)頁面流的一個(gè)元素（它會(huì)根據(jù)其內(nèi)容進(jìn)行擴(kuò)展和適應(yīng)，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則top:100px提供一個(gè)偏移量，將列容器向下推，使其覆蓋標(biāo)題。

◆規(guī)則div#side1控制第一個(gè)工具條列的樣式。它設(shè)置該列的寬度（width:150px）并使用絕對定位將該列放置在其父元素的左上角。父元素是該列的div，如果該元素使用相對于body元素的相對定位，那么它將解釋top:0px規(guī)則而非你所期望的100px設(shè)置。規(guī)則div#side2以同樣的方式設(shè)置左工具條所用的列。div#side1和div#side2唯一不同之處是背景色和left:600px規(guī)則，后者將該列定位在其它兩列的右邊。

◆樣式div#content中的主內(nèi)容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設(shè)計(jì)寬度（width:450px）并使用left:150px和top:0px規(guī)則在其父元素（包圍著三個(gè)列的div）內(nèi)定位該列。主要的不同之處在于position:relative規(guī)則。我們使用相對定位使主內(nèi)容列可以影響其父元素（包圍著三個(gè)列的div）的尺寸并因此影響頁腳元素的尺寸。

◆樣式div#foot設(shè)置頁腳的寬度（width:750px），該樣式還包含一個(gè)clear:both規(guī)則，該規(guī)則保證它接在其它元素下面，而不是旁邊。由于它使用相對定位，所以它在頁面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個(gè)列的div所決定的。規(guī)則margin-top:100px是一個(gè)很重要的細(xì)節(jié)，它防止頁腳被上面的列所覆蓋。這些列在頁面流中從它們的常規(guī)位置偏移，從而為絕對定位的標(biāo)題以及需要相應(yīng)偏移的頁腳騰出空間。

在前面的基礎(chǔ)上添加了一個(gè)標(biāo)簽（<divid="wrapper">）和一個(gè)相應(yīng)的CSS樣式后的結(jié)果。下面是新添加的CSS樣式的代碼：

ExampleSourceCode

div#wrapper{  
position:relative;  
margin-left:auto;  
margin-right:auto;  
top:20px;  
width:750px;  
background-color:#CCCCCC;  
}  
 

 這種方法之所以能用，是因?yàn)樗械牟季謉iv都是相對于它們的父元素相對定位的。

【編輯推薦】

1. CSS2.0中最常用的十八般兵器
2. CSS中display:inline-block屬性妙用
3. CSS控制input樣式和懸停交互
4. 全面認(rèn)識(shí)CSS中margin屬性用法
5. CSS代碼結(jié)構(gòu)中id及class類命名探究