通過上一章的學習，讀者了解到了CSS強大的表現控制功能，特別是在布局方面有很大的優勢。相對于代碼條理混亂、樣式雜糅在結構中的表格布局，CSS將帶來全新的布局方法，讓網頁設計師更輕松、更自由。本章通過多個示例展示CSS布局網頁的方法，并對CSS的“盒模型”作詳細闡述。相信讀者在深入理解“盒模型”后，布局網頁、定位CSS網頁元素將更加自如。
11.1 什么叫“Div+CSS”
上一章學習了Web標準的概念以及XHTML和CSS的基本知識。XHTML主要用div標簽進行網頁的布局，而控制布局的工具是CSS代碼，以使網頁符合Web標準。所以很多網頁設計師把這種布局方法的網頁叫做“Div+CSS”網頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。Web標準不僅僅指用div標簽布局（有時候也用其他標簽布局），其含義非常廣，需要代碼編寫良好的結構，有良好的語義以及可讀性等。
所以“Div+CSS”制作的網頁不一定符合Web標準，而符合Web標準的網頁不一定完全由div標簽布局。
11.1.1 初識div
div標簽在Web標準的網頁中使用非常頻繁，那么，相對于其他HTML繼承而來的元素，div有什么特別之處呢？答案可能令讀者失望，div標簽什么特性也沒有，一定要說其特性，不過是一種塊狀元素。正因為div沒有任何特性，所以更容易被CSS代碼控制樣式。
div標簽是雙標簽，即以<div></div>的形式存在，其間可以放置任何內容，包括其他的div標簽。也就是說，div標簽是一個沒有任何特性的容器而已。在D:/web/目錄下創建網頁文件（XHTML1.0），命名為div.htm，編寫div.htm文件代碼如代碼11.1所示。
代碼11.1 默認的div標簽：div.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初識div標簽</title>
</head>
<body>
<div>我是第1個div標簽中的內容</div>
<div>我是第2個div標簽中的內容</div>
<div>我是第3個div標簽中的內容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.1所示。沒有CSS的幫助下，div標簽沒有任何特別之處，只是無論怎么調整瀏覽器窗口，每個div標簽占據一行。即默認情況下，一行只能容納一個div標簽。為了再次證明一行只能容納一個div標簽，筆者對div通過id選擇符加入CSS代碼，使div擁有背景色以及寬度，修改div.htm如代碼11.2所示。
代碼11.2 設置背景的div標簽：div.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初識div標簽</title>
<style type="text/css">
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
</style>
</head>
<body>
<div id="top">第1個div標簽中的內容</div>
<div id="mid">第2個div標簽中的內容</div>
<div id="bt">第3個div標簽中的內容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.2所示。
圖11.1 默認的div標簽 圖11.2 設置背景的div標簽
通過背景色的設置，可以從圖11.2中看到div標簽默認占據一行，寬度也為一行的寬度。通過寬度的設置可以發現，并不是因為div的寬度為一行導致無法容納后面的div標簽。無論寬度多小，一行始終只有一個div標簽，讀者須謹記。
div標簽作為網頁CSS布局的主力元素，其優勢已經非常明顯。相對于表格布局，div更加靈活，因為div只是一個沒有任何特性的容器，CSS可以非常靈活地對其進行控制，組成網頁的每一塊區域。在大多數情況下，僅僅通過div標簽和CSS的配合即可完成頁面的布局，也難怪很多人稱Web標準頁為“Div+CSS”網頁了。
新聞熱點
疑難解答
