通過(guò)實(shí)例學(xué)習(xí)CSS布局網(wǎng)頁(yè)

發(fā)布時(shí)間：2009-08-14 02:19:55 作者：佚名

本章通過(guò)多個(gè)示例展示CSS布局網(wǎng)頁(yè)的方法，并對(duì)CSS的“盒模型”作詳細(xì)闡述。相信讀者在深入理解“盒模型”后，布局網(wǎng)頁(yè)、定位CSS網(wǎng)頁(yè)元素將更加自如。

通過(guò)上一章的學(xué)習(xí)，讀者了解到了CSS強(qiáng)大的表現(xiàn)控制功能，特別是在布局方面有很大的優(yōu)勢(shì)。相對(duì)于代碼條理混亂、樣式雜糅在結(jié)構(gòu)中的表格布局，CSS將帶來(lái)全新的布局方法，讓網(wǎng)頁(yè)設(shè)計(jì)師更輕松、更自由。本章通過(guò)多個(gè)示例展示CSS布局網(wǎng)頁(yè)的方法，并對(duì)CSS的“盒模型”作詳細(xì)闡述。相信讀者在深入理解“盒模型”后，布局網(wǎng)頁(yè)、定位CSS網(wǎng)頁(yè)元素將更加自如。

11.1 什么叫“Div+CSS”

上一章學(xué)習(xí)了Web標(biāo)準(zhǔn)的概念以及XHTML和CSS的基本知識(shí)。XHTML主要用div標(biāo)簽進(jìn)行網(wǎng)頁(yè)的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁(yè)符合Web標(biāo)準(zhǔn)。所以很多網(wǎng)頁(yè)設(shè)計(jì)師把這種布局方法的網(wǎng)頁(yè)叫做“Div+CSS”網(wǎng)頁(yè)。其實(shí)這是不太準(zhǔn)確的說(shuō)法，因?yàn)閃eb標(biāo)準(zhǔn)不太被行外人士所熟識(shí)，導(dǎo)致“Div+CSS”的概念取代了Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)不僅僅指用div標(biāo)簽布局（有時(shí)候也用其他標(biāo)簽布局），其含義非常廣，需要代碼編寫良好的結(jié)構(gòu)，有良好的語(yǔ)義以及可讀性等。

所以“Div+CSS”制作的網(wǎng)頁(yè)不一定符合Web標(biāo)準(zhǔn)，而符合Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)不一定完全由div標(biāo)簽布局。

11.1.1 初識(shí)div

div標(biāo)簽在Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)中使用非常頻繁，那么，相對(duì)于其他HTML繼承而來(lái)的元素，div有什么特別之處呢？答案可能令讀者失望，div標(biāo)簽什么特性也沒(méi)有，一定要說(shuō)其特性，不過(guò)是一種塊狀元素。正因?yàn)閐iv沒(méi)有任何特性，所以更容易被CSS代碼控制樣式。

div標(biāo)簽是雙標(biāo)簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容，包括其他的div標(biāo)簽。也就是說(shuō)，div標(biāo)簽是一個(gè)沒(méi)有任何特性的容器而已。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div.htm，編寫div.htm文件代碼如代碼11.1所示。

代碼11.1 默認(rèn)的div標(biāo)簽：div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.1所示。沒(méi)有CSS的幫助下，div標(biāo)簽沒(méi)有任何特別之處，只是無(wú)論怎么調(diào)整瀏覽器窗口，每個(gè)div標(biāo)簽占據(jù)一行。即默認(rèn)情況下，一行只能容納一個(gè)div標(biāo)簽。為了再次證明一行只能容納一個(gè)div標(biāo)簽，筆者對(duì)div通過(guò)id選擇符加入CSS代碼，使div擁有背景色以及寬度，修改div.htm如代碼11.2所示。

代碼11.2 設(shè)置背景的div標(biāo)簽：div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#top,#bt{background-color:#eee;

}

#mid{background-color:#999;

width:250px;

}

#bt{width:120px;}

</style>

</head>

<body>

</body>

</html>

在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.2所示。

圖11.1 默認(rèn)的div標(biāo)簽圖11.2 設(shè)置背景的div標(biāo)簽

通過(guò)背景色的設(shè)置，可以從圖11.2中看到div標(biāo)簽?zāi)J(rèn)占據(jù)一行，寬度也為一行的寬度。通過(guò)寬度的設(shè)置可以發(fā)現(xiàn)，并不是因?yàn)閐iv的寬度為一行導(dǎo)致無(wú)法容納后面的div標(biāo)簽。無(wú)論寬度多小，一行始終只有一個(gè)div標(biāo)簽，讀者須謹(jǐn)記。

div標(biāo)簽作為網(wǎng)頁(yè)CSS布局的主力元素，其優(yōu)勢(shì)已經(jīng)非常明顯。相對(duì)于表格布局，div更加靈活，因?yàn)閐iv只是一個(gè)沒(méi)有任何特性的容器，CSS可以非常靈活地對(duì)其進(jìn)行控制，組成網(wǎng)頁(yè)的每一塊區(qū)域。在大多數(shù)情況下，僅僅通過(guò)div標(biāo)簽和CSS的配合即可完成頁(yè)面的布局，也難怪很多人稱Web標(biāo)準(zhǔn)頁(yè)為“Div+CSS”網(wǎng)頁(yè)了。

11.1.2 XHTML中的塊狀元素和內(nèi)聯(lián)元素

上一節(jié)提到了XHTML的布局核心標(biāo)簽是div，并且div屬于XHTML中的塊級(jí)元素。XHTML的標(biāo)簽?zāi)J(rèn)為2種元素。

（1）塊狀元素。該元素是矩形的，有自己的高度和寬度。默認(rèn)情況下，在父容器中占據(jù)一行，同一行無(wú)法容納其他元素及文本。其他的元素將顯示在其下一行，可以看做被塊級(jí)元素“擠”下去的。塊狀元素就是一個(gè)矩形容器，邊緣非常硬，CSS設(shè)置了高度和寬度后，形狀無(wú)法被改變。

（2）內(nèi)聯(lián)元素。和塊級(jí)元素相反，內(nèi)聯(lián)元素沒(méi)有固定形狀，也無(wú)法設(shè)置寬度和高度。內(nèi)聯(lián)元素形狀由其內(nèi)含的內(nèi)容決定，所以在寬度足夠的情況下，一行能容納多個(gè)內(nèi)聯(lián)元素。有人說(shuō)相對(duì)于塊狀元素是一個(gè)硬盒子，內(nèi)聯(lián)元素就是一個(gè)軟軟的布袋子（形狀由內(nèi)容決定）。

塊狀元素適合于大塊的區(qū)域排版，所以常用來(lái)布局頁(yè)面。而內(nèi)聯(lián)元素適合于局部元素的樣式設(shè)置，所以常用于局部的文字樣式設(shè)置。

11.1.3 div元素的樣式設(shè)置

讀者要使用div元素進(jìn)行網(wǎng)頁(yè)布局，首先須學(xué)會(huì)使用CSS靈活地設(shè)置div元素的樣式。本節(jié)就幾個(gè)常用的示例學(xué)習(xí)div元素的多種樣式設(shè)置，使讀者快速理解div元素。作為單個(gè)div元素，width屬性用于設(shè)置其寬度，height屬性設(shè)置其高度。由于網(wǎng)頁(yè)大多數(shù)用于計(jì)算機(jī)顯示屏幕作媒介，所以常用像素作為固定尺寸的單位，即px。

— 注意：在HTML元素中設(shè)置樣式不需要填寫單位，默認(rèn)為像素。

當(dāng)單位為百分比時(shí)，div元素的寬度和高度為自適應(yīng)狀態(tài)，即寬度和高度適應(yīng)瀏覽器窗口尺寸而變化。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_2.htm，編寫div_2.htm文件代碼如代碼11.3所示。

代碼11.3 設(shè)置div樣式：div_2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>設(shè)置div樣式</title>

#fst {

background-color: #eee;

border:1px solid #000;

width:300px;

height:200px;

}

#sec {

background-color: #eee;

border:1px solid #000;

width:50%;

height:25%;

}

</style></head>

<body>

<div id="fst">這是固定尺寸的寬度和高度</div>

<hr />

<div id="sec">這是自適應(yīng)尺寸的寬度和高度</div>

</body>

</html>

為了更方便看到div的表現(xiàn)，筆者給2個(gè)div都設(shè)置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.3所示。

圖11.3 設(shè)置div樣式

很明顯，第1個(gè)div寬度和高度固定，形成了一個(gè)“堅(jiān)硬”的盒子。而第2個(gè)div由于設(shè)置其寬度為50%，其寬度隨著瀏覽器的寬度變化而變化。但是問(wèn)題出現(xiàn)了，第2個(gè)div的高度雖然設(shè)置為25%，按理說(shuō)其高度應(yīng)該隨著瀏覽器的高度變化而變化。然而在示例中div高度僅和文本高度相當(dāng)，好像高度設(shè)置沒(méi)有起作用。

其實(shí)設(shè)置高度自適應(yīng)有一個(gè)前提，div的高度自適應(yīng)是相對(duì)于父容器的高度，本例中div父容器為body或者h(yuǎn)tml（不同瀏覽器解析方式不同）。body或者h(yuǎn)tml在本例中沒(méi)有設(shè)置高度，div的高度自適應(yīng)沒(méi)有參照物，也就無(wú)法生效。

接下來(lái)在CSS中設(shè)置body和html的高度，就可解決div的高度自適應(yīng)問(wèn)題。body和html的高度直接設(shè)置為100%即可，不會(huì)對(duì)頁(yè)面有任何影響。在div_2.htmd的CSS部分加入如代碼11.4所示的代碼。

代碼11.4 設(shè)置div樣式：div_2.htm

html,body{height:100%;}

為了考慮多種瀏覽器的兼容性，html和body同時(shí)設(shè)置100%寬度。在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.4所示。

調(diào)整瀏覽器高度后，第2個(gè)div的高度隨之變化。各種瀏覽器對(duì)XHTML和CSS的解析方式有差異，在后面將詳細(xì)討論解決辦法，以解決瀏覽器的兼容性問(wèn)題。

圖11.4 設(shè)置div標(biāo)簽高度自適應(yīng)

11.1.4 布局頁(yè)面的寬度

由于瀏覽者的顯示分辨率不同，瀏覽者常見(jiàn)顯示分辨率（單位：像素）為800×600、1024×768、1280×1024、1440×960等。所以在布局頁(yè)面時(shí)，要充分考慮頁(yè)面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過(guò)顯示寬度，頁(yè)面將出現(xiàn)水平滾動(dòng)條。

— 說(shuō)明：盡量保證網(wǎng)頁(yè)只有垂直滾動(dòng)條，才符合瀏覽者的習(xí)慣，所以高度不需要考慮，由頁(yè)面內(nèi)容決定網(wǎng)頁(yè)高度。

頁(yè)面布局寬度一般考慮最小顯示分辨率的瀏覽用戶，即過(guò)去瀏覽用戶的顯示分辨率最小為800×600（15寸CRT顯示器），其最小寬度為800像素。瀏覽器的邊框及滾動(dòng)條部分約占24像素左右，所以布局寬度為分辨率的水平像素減去24像素。所以過(guò)去網(wǎng)頁(yè)布局寬度一般為778像素，再寬就會(huì)使頁(yè)面產(chǎn)生水平滾動(dòng)條。

由于計(jì)算機(jī)設(shè)備的飛速發(fā)展，現(xiàn)在使用800×600顯示分辨率的用戶很少了，現(xiàn)在頁(yè)面布局寬度最大不超過(guò)1002 ~1003像素（考慮到最小寬度1024像素，即1024×768顯示分辨率）。

11.1.5 布局頁(yè)面水平居中

為了適應(yīng)不同瀏覽用戶的分辨率，網(wǎng)頁(yè)設(shè)計(jì)師要始終保證頁(yè)面整體內(nèi)容在頁(yè)面居中。使用HTML表格布局頁(yè)面時(shí)，只需要設(shè)置布局表格的align屬性為center即可。而div居中沒(méi)有屬性可以設(shè)置，只能通過(guò)CSS控制其位置。

在布局頁(yè)面前，網(wǎng)頁(yè)制作者一定要把頁(yè)面的默認(rèn)邊距清除。為了方便操作，常用的方法是使用通配選擇符*，將所有對(duì)象的邊距清除，即margin屬性和padding屬性。margin屬性代表對(duì)象的外邊距（上、下、左、右），padding屬性代表對(duì)象的內(nèi)邊距，也叫填充（上、下、左、右）。

— 說(shuō)明：margin屬性和padding屬性類似于表格單元格的cellspacing屬性和cellpadding屬性，不過(guò)margin屬性和padding屬性作用于所有塊狀元素。

使div元素水平居中的方法有多種，常用的方法是用CSS設(shè)置div的左右邊距，即margin-left屬性和margin-right屬性。當(dāng)設(shè)置div左外邊距和右外邊距的值為auto，即自動(dòng)時(shí)，左外邊距和右外邊距將相等，即達(dá)到了div水平居中的效果。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_align.htm，編寫div_align.htm文件代碼如代碼11.5所示。

代碼11.5 設(shè)置div水平居中：div_align.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>設(shè)置div水平居中</title>

*{margin:0px;

padding:0px;

}

#all{width:75%;

height:200px;

background-color:#eee;

border:1px solid #000;

margin-left:auto;

margin-right:auto;

}

</style>

</head>

<body>

</body>

</html>

為了更方便看到div的表現(xiàn)，筆者給div設(shè)置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_align.htm，瀏覽效果如圖11.5所示。

是不是很簡(jiǎn)單？設(shè)置外邊距的CSS代碼可以進(jìn)一步簡(jiǎn)化，使用margin屬性，編寫方法為：

margin:0px auto;

圖11.5 設(shè)置div水平居中

margin屬性值前面的0代表上邊距和下邊距為0像素，auto代表左邊距和右邊距為auto，即自動(dòng)設(shè)置。讀者注意，0px和auto之間使用空格符號(hào)分隔，而不是逗號(hào)。還有一種方法是使用html或body的text-align屬性，設(shè)置其值為center，即所有對(duì)象將居中。這樣將導(dǎo)致頁(yè)面文本居中，所以不作推薦，其編寫方法為：

html,body{text-align:center;}

11.1.6 div元素的嵌套

類似于表格布局頁(yè)面，為了實(shí)現(xiàn)復(fù)雜的布局結(jié)構(gòu)，div元素也需要互相嵌套。不過(guò)在布局頁(yè)面時(shí)盡量少嵌套，因?yàn)閄HTML元素多重嵌套將影響瀏覽器對(duì)代碼的解析速度。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_div.htm，編寫div_div.htm文件代碼如代碼11.6所示。

代碼11.6 div嵌套：div_div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>div嵌套</title>

*{margin:0px;

padding:0px;

}

#all{width:400px;

height:300px;

background-color:#600;

margin:0px auto;

}

#one{width:300px;

height:120px;

background-color:#eee;

border:1px solid #000;

margin:0px auto;

}

#two{width:300px;

height:120px;

background-color:#eee;

border:1px solid #000;

margin:0px auto;

}

</style></head>

<body>

</div>

</body>

</html>

為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設(shè)置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。本示例綜合了div居中的知識(shí)，內(nèi)部的2個(gè)div水平居中在其父容器（外部div）中。在瀏覽器地址欄輸入http://localhost/div_div.htm，瀏覽效果如圖11.6所示。

圖11.6 div嵌套

11.1.7 div元素的浮動(dòng)

作為塊狀元素，通過(guò)div布局網(wǎng)頁(yè)，CSS設(shè)置其屬性，完全符合內(nèi)容與表現(xiàn)分離。不過(guò)一個(gè)div標(biāo)簽占據(jù)一行，怎樣實(shí)現(xiàn)布局中并列的2塊區(qū)域呢？塊狀元素有一個(gè)很重要的“float”屬性，可以使多個(gè)塊狀元素并列于一行。

float屬性也被稱為浮動(dòng)屬性，這個(gè)詞非常形象。對(duì)前面的div元素設(shè)置浮動(dòng)屬性后，當(dāng)前面的div元素留有足夠的空白寬度時(shí)，后面的div元素將自動(dòng)浮上來(lái)，和前面的div元素并列于一行。float屬性的值有l(wèi)eft、right、none和inherit。很多對(duì)象都有inherit屬性，這是繼承屬性，代表繼承父容器的屬性。float屬性值為none時(shí)，塊狀元素不會(huì)浮動(dòng)，這也是塊狀元素的默認(rèn)值。float屬性值為left時(shí)，塊狀元素將向左浮動(dòng)；float屬性值為right時(shí)，塊狀元素將向右浮動(dòng)。

— 注意：使2個(gè)div并列于一行的前提是：這一行有足夠的寬度容納2個(gè)div的寬度。

（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_float.htm，編寫div_float.htm文件代碼如代碼11.7所示。

代碼11.7 設(shè)置div浮動(dòng)：div_float.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>設(shè)置div浮動(dòng)</title>

*{margin:0px;

padding:0px;

}

#one{width:125px;

height:120px;

background-color:#eee;

border:1px solid #000;

float:left;

}

#two{width:200px;

height:120px;

background-color:#eee;

border:1px solid #000;

}

</style></head>

<body>

</body>

</html>

（2）為了更方便看到div的表現(xiàn)，筆者給div設(shè)置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_float.htm，瀏覽效果如圖11.7所示。

（3）筆者只設(shè)置了第1個(gè)div元素向左浮動(dòng)，第2個(gè)div元素“流”上來(lái)了，并緊挨著第1個(gè)div元素。設(shè)置第2個(gè)div向右浮動(dòng)如代碼11.8所示。

代碼11.8 設(shè)置div浮動(dòng)：div_float.htm

#two{width:200px;

height:120px;

background-color:#eee;

border:1px solid #000;

float:right;

}

（4）在瀏覽器地址欄輸入http://localhost/div_float.htm，瀏覽效果如圖11.8所示。

圖11.7 設(shè)置div向左浮動(dòng) 圖11.8 div左浮動(dòng)和右浮動(dòng)

（5）這時(shí)，第2個(gè)div緊挨著其父容器（瀏覽器）的右邊框，當(dāng)然，這2個(gè)div元素也可以換個(gè)位置，即設(shè)置CSS如代碼11.9所示。

代碼11.9 設(shè)置div浮動(dòng)：div_float.htm

#one{width:125px;

height:120px;

background-color:#eee;

border:1px solid #000;

float:right;

}

#two{width:200px;

height:120px;

background-color:#eee;

border:1px solid #000;

float:left;

}

（6）在瀏覽器地址欄輸入http://localhost/div_float.htm，瀏覽效果如圖11.9所示。

圖11.9 交換div浮動(dòng)方向

浮動(dòng)屬性是CSS布局的最佳利器，可以通過(guò)不同的浮動(dòng)屬性值靈活地定位div元素，以達(dá)到靈活布局網(wǎng)頁(yè)的目的。塊狀元素（包括div）浮動(dòng)的范圍由其被包含的父容器所決定，以上實(shí)例div元素的父容器就是body或html。

為了更加靈活地定位div元素，CSS提供了clear屬性，中文意思即為“清除”。clear屬性的值有none、left、right和both，默認(rèn)值為none。當(dāng)多個(gè)塊狀元素由于第1個(gè)設(shè)置浮動(dòng)屬性而并列時(shí)，如果某個(gè)元素不需要被“流”上去，即可設(shè)置相應(yīng)的clear屬性。

（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_clear.htm，編寫div_clear.htm文件代碼如代碼11.10所示。

代碼11.10 div的清除屬性：div_clear.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>div的清除屬性</title>

*{margin:0px;

padding:0px;

}

.all{width:400px;

height:170px;

background-color:#600;

margin:0px auto;

}

.one,.two,#three_1,#three_2,#three_3,#three_4{width:120px;

height:50px;

background-color:#eee;

border:1px solid #000;

}

.one{float:left;}

.two{float:right;}

#three_1{clear:none;}

#three_2{clear:both;}

#three_3{clear:right;}

#three_4{clear:left;}

</style></head>

<body>

<div id="three_1">第3個(gè)div（clear:none;）</div>

</div>

<div id="three_2">第3個(gè)div（clear:both;）</div>

</div>

<div id="three_3">第2個(gè)div（clear:right;）</div>

</div>

<div id="three_4">第2個(gè)div（clear:left;）</div>

</div>

</body>

</html>

（2）為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設(shè)置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。在瀏覽器地址欄輸入http://localhost/div_clear.htm，瀏覽效果如圖11.10所示。

圖11.10 div清除屬性

— 第1種情況為默認(rèn)情況，即clear屬性值為none，由于前面的div都設(shè)置了浮動(dòng)屬性（1個(gè)向左浮動(dòng)，1個(gè)向右浮動(dòng)），所以第3個(gè)div元素自動(dòng)“流”上去，處于2個(gè)div之間的空白處。

— 第2種情況clear屬性值為both，即不管前面的div設(shè)置向左浮動(dòng)還是向右浮動(dòng)，此div元素不自動(dòng)“流”上去。其不受浮動(dòng)影響，保持在底部不動(dòng)。

— 第3種情況clear屬性值為right，第2個(gè)div兩邊都有浮動(dòng)的div，但不允許向右浮動(dòng)的div處于同一行，所以第3個(gè)div元素自動(dòng)換行。

— 第4種情況clear屬性值為left，第2個(gè)div兩邊都有浮動(dòng)的div，但不允許向右浮動(dòng)的div處于同一行，所以第2個(gè)div元素自動(dòng)換行。

通過(guò)clear屬性，div元素的定位更加方便自如，希望讀者多加練習(xí)。

11.1.8 一些高級(jí)的div布局技巧

為了滿足更多布局的要求，本節(jié)特別選擇幾個(gè)常用布局技巧。

（1）右邊div元素寬度自適應(yīng)。本例為并排2個(gè)div，其中左邊的div為固定寬度，右邊div為自適應(yīng)寬度。常用于文章列表和文章內(nèi)容的頁(yè)面布局。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_demo.htm，編寫div_demo.htm文件代碼如代碼11.11所示。

代碼11.11 右邊div元素寬度自適應(yīng)：div_demo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>右邊div元素寬度自適應(yīng)</title>

*{margin:0px;

padding:0px;

}

#one{width:70%;

height:200px;

background-color:#eee;

border:1px solid #000;

float:right;

}

#two{width:50px;

height:200px;

background-color:#eee;

border:1px solid #000;

float:right;

}

</style></head>

<body>

</body>

</html>

為了更方便看到div的表現(xiàn)，筆者給div設(shè)置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo.htm，瀏覽效果如圖11.11所示。

筆者特意把2個(gè)div設(shè)置為向右浮動(dòng)，第1個(gè)div元素為自適應(yīng)寬度，而第2個(gè)div元素為固定寬度。本例為了防止讀者的一個(gè)錯(cuò)覺(jué)，即前面的div浮動(dòng)后一定在左邊，其實(shí)左右方向取決于div元素浮動(dòng)屬性的值。

（2）div內(nèi)容居中。這是很多網(wǎng)站需要用到的居中示例，即保持div包含內(nèi)容的水平和垂直居中。在D:\web\目錄下創(chuàng)建img目錄，放入一個(gè)jpg格式圖片文件，并命名為cs.jpg，在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_demo2.htm，編寫div_demo2.htm文件代碼如代碼11.12所示。

圖11.11 右邊div元素寬度自適應(yīng)

代碼11.12 div內(nèi)容居中：div_demo2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{margin:0px;

padding:0px;

}

body,html{height:100%;}

.center{width:300px;

height:250px;

text-align:center;

line-height:250px;

background-color:#eee;

border:1px solid #000;

float:left;

}

</style></head>

<body>

我在中間

</div>

</div>

</body>

</html>

為了更方便看到div的表現(xiàn)，筆者給div設(shè)置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo2.htm，瀏覽效果如圖11.12所示。

圖11.12 div內(nèi)容居中

筆者在這里用了text-align屬性，即內(nèi)含內(nèi)容水平居中，也用了line-height屬性，這是行距屬性，當(dāng)設(shè)置為div的高度時(shí)，其所含內(nèi)容就垂直居中了。

11.1.9 一個(gè)典型的網(wǎng)頁(yè)布局實(shí)例

本節(jié)綜合前面學(xué)習(xí)的布局知識(shí)，制作比較典型的網(wǎng)頁(yè)布局實(shí)例，先分析這個(gè)例子布局的要求。這個(gè)例子要求頁(yè)面有上下4行區(qū)域，分別用作廣告區(qū)、導(dǎo)航區(qū)、主體區(qū)和版權(quán)信息區(qū)。而主體區(qū)又分為左右2個(gè)大區(qū)，左區(qū)域用于文章列表，右區(qū)域用于8個(gè)主體內(nèi)容區(qū)?？瓷先ゲ季謪^(qū)域比較多，用表格布局需要很多行代碼才能完成。利用div和CSS可以很好地完成，并且代碼比較簡(jiǎn)練。

根據(jù)實(shí)例要求作圖，并分析布局的結(jié)構(gòu)，從而方便編寫div布局的結(jié)構(gòu)代碼，筆者做分析圖如圖11.13所示，并在每個(gè)區(qū)域做了id命名（#符號(hào)開(kāi)頭），以方便div編寫。

圖11.13 網(wǎng)頁(yè)布局結(jié)構(gòu)分析

從分析圖可以看出整個(gè)頁(yè)面的結(jié)構(gòu)，其中，#top代表廣告區(qū)、#nav代表導(dǎo)航區(qū)、#mid代表主體區(qū)、#left代表#mid所包含的左區(qū)域、#right代表#mid所包含的右邊區(qū)域、#bt代表版權(quán)信息區(qū)。

#right區(qū)域包含8個(gè)具體內(nèi)容區(qū)，由于這些內(nèi)容區(qū)的尺寸相同，所以在實(shí)例中將會(huì)使用class選擇符作為統(tǒng)一樣式，對(duì)這個(gè)8個(gè)區(qū)域進(jìn)行CSS樣式指定。根據(jù)結(jié)構(gòu)分析圖可以編寫XHTML部分的結(jié)構(gòu)代碼，編寫如下：

<div id="top">頂部廣告區(qū)</div>

</div>

筆者在8個(gè)具體內(nèi)容區(qū)用了同一個(gè)class名稱的選擇符，用于在CSS中指定統(tǒng)一的樣式。在D:\web\目錄下創(chuàng)建網(wǎng)頁(yè)文件（XHTML1.0），命名為div_page.htm，編寫div_page.htm文件代碼如代碼11.13所示。

代碼11.13 div網(wǎng)頁(yè)布局：div_page.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* {margin:0px;

padding:0px;

}

#top,#nav,#mid,#footer{width:500px;

margin:0px auto;}

#top{height:80px;

background-color:#ddd;}

#nav{height:25px;

background-color:#fc0;}

#mid{height:300px;}

#left{width:98px;

height:298px;

border:1px solid #999;

float:left;

background-color:#ddd;}

#right{height:298px;

background-color:#ccc;}

.content{width:98px;

height:148px;

background-color:#c00;

border:1px solid #999;

float:left;}

#content2{background-color:#f60;}

#footer{height:80px;

background-color:#fc0;}

</style></head>

<body>

<div id="top">頂部廣告區(qū)</div>

</div>

</body>

</html>

筆者稍微修改了XHTML部分的代碼，選了4個(gè)具體內(nèi)容區(qū)加上了id名稱為content2的屬性，這是為了使這4個(gè)區(qū)域有不同的背景色。在瀏覽器地址欄輸入http://localhost/ div_page.htm，瀏覽效果如圖11.13所示。

本例綜合了前面的布局知識(shí)，如居中等。不過(guò)，而由CSS代碼可得，主體內(nèi)容區(qū)（id名稱為mid）的寬度是500像素，高度是300像素。通過(guò)分析圖可以觀察得出以下關(guān)系公式：

主體內(nèi)容區(qū)寬度=縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度×4

主體內(nèi)容區(qū)高度=縱向?qū)Ш絽^(qū)高度=具體內(nèi)容區(qū)高度×2

在CSS代碼中，縱向?qū)Ш絽^(qū)（id名稱為left）的寬度只有98像素，高度為298像素。而右邊具體內(nèi)容區(qū)（class名稱為content）的寬度也只有98像素，高度為148像素，可得：

縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度×4=490（像素）

縱向?qū)Ш絽^(qū)高度=298（像素）

具體內(nèi)容區(qū)高度×2=296（像素）

主體內(nèi)容區(qū)（id名稱為mid）的寬度與高度為什么會(huì)與內(nèi)含的div寬度有偏差？這涉及瀏覽器解析CSS時(shí)對(duì)寬度和高度的計(jì)算方法，IE7.0瀏覽器和FireFox瀏覽器解析div的寬度和高度設(shè)置值并不包括邊框。由CSS代碼可得，縱向?qū)Ш絽^(qū)（id名稱為left）和具體內(nèi)容區(qū)（class名稱為content）的邊框?yàn)?像素粗，所以關(guān)系公式應(yīng)該進(jìn)一步修改為：