通過實例學(xué)習(xí)CSS布局網(wǎng)頁
我要評論通過上一章的學(xué)習(xí)，讀者了解到了CSS強(qiáng)大的表現(xiàn)控制功能，特別是在布局方面有很大的優(yōu)勢。相對于代碼條理混亂、樣式雜糅在結(jié)構(gòu)中的表格布局，CSS將帶來全新的布局方法，讓網(wǎng)頁設(shè)計師更輕松、更自由。本章通過多個示例展示CSS布局網(wǎng)頁的方法，并對CSS的“盒模型”作詳細(xì)闡述。相信讀者在深入理解“盒模型”后，布局網(wǎng)頁、定位CSS網(wǎng)頁元素將更加自如。
11.1 什么叫“Div+CSS”
上一章學(xué)習(xí)了Web標(biāo)準(zhǔn)的概念以及XHTML和CSS的基本知識。XHTML主要用div標(biāo)簽進(jìn)行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標(biāo)準(zhǔn)。所以很多網(wǎng)頁設(shè)計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準(zhǔn)確的說法，因為Web標(biāo)準(zhǔn)不太被行外人士所熟識，導(dǎo)致“Div+CSS”的概念取代了Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)不僅僅指用div標(biāo)簽布局（有時候也用其他標(biāo)簽布局），其含義非常廣，需要代碼編寫良好的結(jié)構(gòu)，有良好的語義以及可讀性等。
所以“Div+CSS”制作的網(wǎng)頁不一定符合Web標(biāo)準(zhǔn)，而符合Web標(biāo)準(zhǔn)的網(wǎng)頁不一定完全由div標(biāo)簽布局。
11.1.1 初識div
div標(biāo)簽在Web標(biāo)準(zhǔn)的網(wǎng)頁中使用非常頻繁，那么，相對于其他HTML繼承而來的元素，div有什么特別之處呢？答案可能令讀者失望，div標(biāo)簽什么特性也沒有，一定要說其特性，不過是一種塊狀元素。正因為div沒有任何特性，所以更容易被CSS代碼控制樣式。
div標(biāo)簽是雙標(biāo)簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容，包括其他的div標(biāo)簽。也就是說，div標(biāo)簽是一個沒有任何特性的容器而已。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初識div標(biāo)簽</title>
</head>
<body>
<div>我是第1個div標(biāo)簽中的內(nèi)容</div>
<div>我是第2個div標(biāo)簽中的內(nèi)容</div>
<div>我是第3個div標(biāo)簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.1所示。沒有CSS的幫助下，div標(biāo)簽沒有任何特別之處，只是無論怎么調(diào)整瀏覽器窗口，每個div標(biāo)簽占據(jù)一行。即默認(rèn)情況下，一行只能容納一個div標(biāo)簽。為了再次證明一行只能容納一個div標(biāo)簽，筆者對div通過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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初識div標(biāo)簽</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標(biāo)簽中的內(nèi)容</div>
<div id="mid">第2個div標(biāo)簽中的內(nèi)容</div>
<div id="bt">第3個div標(biāo)簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.2所示。
圖11.1 默認(rèn)的div標(biāo)簽 圖11.2 設(shè)置背景的div標(biāo)簽
通過背景色的設(shè)置，可以從圖11.2中看到div標(biāo)簽?zāi)J(rèn)占據(jù)一行，寬度也為一行的寬度。通過寬度的設(shè)置可以發(fā)現(xiàn)，并不是因為div的寬度為一行導(dǎo)致無法容納后面的div標(biāo)簽。無論寬度多小，一行始終只有一個div標(biāo)簽，讀者須謹(jǐn)記。
div標(biāo)簽作為網(wǎng)頁CSS布局的主力元素，其優(yōu)勢已經(jīng)非常明顯。相對于表格布局，div更加靈活，因為div只是一個沒有任何特性的容器，CSS可以非常靈活地對其進(jìn)行控制，組成網(wǎng)頁的每一塊區(qū)域。在大多數(shù)情況下，僅僅通過div標(biāo)簽和CSS的配合即可完成頁面的布局，也難怪很多人稱Web標(biāo)準(zhǔn)頁為“Div+CSS”網(wǎng)頁了。
相關(guān)文章
本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動定位、inline-block+letter-spacing屬性這五種方法的實現(xiàn)，感興趣的可以了解下2023-09-18- 在Web開發(fā)中，經(jīng)常會遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動手試一試2023-09-08
- 相信大家在面試的時候也會經(jīng)常碰到css實現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流2023-09-07
flex布局中使用flex-wrap實現(xiàn)換行的項目實踐
最近需要做個換行的布局，本文主要介紹了flex布局中使用flex-wrap實現(xiàn)換行的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需2022-06-16CSS布局之浮動(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考2021-09-23
這篇文章主要介紹了css實現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了div水平布局兩邊對齊的三種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2021-01-21
waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2021-01-19
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-11-27- 這篇文章主要介紹了css實現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-28