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

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

我要評論

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

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

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

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

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

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

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

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

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

當(dāng)單位為百分比時(shí)，div元素的寬度和高度為自適應(yīng)狀態(tài)，即寬度和高度適應(yīng)瀏覽器窗口尺寸而變化。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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個div都設(shè)置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.3所示。

圖11.3 設(shè)置div樣式

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

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

接下來在CSS中設(shè)置body和html的高度，就可解決div的高度自適應(yīng)問題。body和html的高度直接設(shè)置為100%即可，不會對頁面有任何影響。在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個div的高度隨之變化。各種瀏覽器對XHTML和CSS的解析方式有差異，在后面將詳細(xì)討論解決辦法，以解決瀏覽器的兼容性問題。