簡單學習CSS網(wǎng)頁布局(初學者)
發(fā)布時間：2009-03-02 22:17:43 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS&rdquo
XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。 CSS布局方法
通過上一章的學習，讀者了解到了CSS強大的表現(xiàn)控制功能，特別是在布局方面有很大的優(yōu)勢。相對于代碼條理混亂、樣式雜糅在結構中的表格布局，CSS將帶來全新的布局方法，讓網(wǎng)頁設計師更輕松、更自由。本章通過多個示例展示CSS布局網(wǎng)頁的方法，并對CSS的“盒模型”作詳細闡述。相信讀者在深入理解“盒模型”后，布局網(wǎng)頁、定位CSS網(wǎng)頁元素將更加自如。
11.1 什么叫“Div+CSS”
上一章學習了Web標準的概念以及XHTML和CSS的基本知識。XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。Web標準不僅僅指用div標簽布局（有時候也用其他標簽布局），其含義非常廣，需要代碼編寫良好的結構，有良好的語義以及可讀性等。
所以“Div+CSS”制作的網(wǎng)頁不一定符合Web標準，而符合Web標準的網(wǎng)頁不一定完全由div標簽布局。
11.1.1 初識div
div標簽在Web標準的網(wǎng)頁中使用非常頻繁，那么，相對于其他HTML繼承而來的元素，div有什么特別之處呢？答案可能令讀者失望，div標簽什么特性也沒有，一定要說其特性，不過是一種塊狀元素。正因為div沒有任何特性，所以更容易被CSS代碼控制樣式。
div標簽是雙標簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容，包括其他的div標簽。也就是說，div標簽是一個沒有任何特性的容器而已。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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標簽中的內(nèi)容</div>
<div>我是第2個div標簽中的內(nèi)容</div>
<div>我是第3個div標簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.1所示。沒有CSS的幫助下，div標簽沒有任何特別之處，只是無論怎么調整瀏覽器窗口，每個div標簽占據(jù)一行。即默認情況下，一行只能容納一個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標簽中的內(nèi)容</div>
<div id="mid">第2個div標簽中的內(nèi)容</div>
<div id="bt">第3個div標簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.2所示。
圖11.1 默認的div標簽 圖11.2 設置背景的div標簽
通過背景色的設置，可以從圖11.2中看到div標簽默認占據(jù)一行，寬度也為一行的寬度。通過寬度的設置可以發(fā)現(xiàn)，并不是因為div的寬度為一行導致無法容納后面的div標簽。無論寬度多小，一行始終只有一個div標簽，讀者須謹記。
div標簽作為網(wǎng)頁CSS布局的主力元素，其優(yōu)勢已經(jīng)非常明顯。相對于表格布局，div更加靈活，因為div只是一個沒有任何特性的容器，CSS可以非常靈活地對其進行控制，組成網(wǎng)頁的每一塊區(qū)域。在大多數(shù)情況下，僅僅通過div標簽和CSS的配合即可完成頁面的布局，也難怪很多人稱Web標準頁為“Div+CSS”網(wǎng)頁了。
11.1.2 XHTML中的塊狀元素和內(nèi)聯(lián)元素
上一節(jié)提到了XHTML的布局核心標簽是div，并且div屬于XHTML中的塊級元素。XHTML的標簽默認為2種元素。
（1）塊狀元素。該元素是矩形的，有自己的高度和寬度。默認情況下，在父容器中占據(jù)一行，同一行無法容納其他元素及文本。其他的元素將顯示在其下一行，可以看做被塊級元素“擠”下去的。塊狀元素就是一個矩形容器，邊緣非常硬，CSS設置了高度和寬度后，形狀無法被改變。
（2）內(nèi)聯(lián)元素。和塊級元素相反，內(nèi)聯(lián)元素沒有固定形狀，也無法設置寬度和高度。內(nèi)聯(lián)元素形狀由其內(nèi)含的內(nèi)容決定，所以在寬度足夠的情況下，一行能容納多個內(nèi)聯(lián)元素。有人說相對于塊狀元素是一個硬盒子，內(nèi)聯(lián)元素就是一個軟軟的布袋子（形狀由內(nèi)容決定）。
塊狀元素適合于大塊的區(qū)域排版，所以常用來布局頁面。而內(nèi)聯(lián)元素適合于局部元素的樣式設置，所以常用于局部的文字樣式設置。
11.1.3 div元素的樣式設置
讀者要使用div元素進行網(wǎng)頁布局，首先須學會使用CSS靈活地設置div元素的樣式。本節(jié)就幾個常用的示例學習div元素的多種樣式設置，使讀者快速理解div元素。作為單個div元素，width屬性用于設置其寬度，height屬性設置其高度。由于網(wǎng)頁大多數(shù)用于計算機顯示屏幕作媒介，所以常用像素作為固定尺寸的單位，即px。
— 注意：在HTML元素中設置樣式不需要填寫單位，默認為像素。
當單位為百分比時，div元素的寬度和高度為自適應狀態(tài)，即寬度和高度適應瀏覽器窗口尺寸而變化。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_2.htm，編寫div_2.htm文件代碼如代碼11.3所示。
代碼11.3 設置div樣式：div_2.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">
#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">這是自適應尺寸的寬度和高度</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給2個div都設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.3所示。
圖11.3 設置div樣式
很明顯，第1個div寬度和高度固定，形成了一個“堅硬”的盒子。而第2個div由于設置其寬度為50%，其寬度隨著瀏覽器的寬度變化而變化。但是問題出現(xiàn)了，第2個div的高度雖然設置為25%，按理說其高度應該隨著瀏覽器的高度變化而變化。然而在示例中div高度僅和文本高度相當，好像高度設置沒有起作用。
其實設置高度自適應有一個前提，div的高度自適應是相對于父容器的高度，本例中div父容器為body或者html（不同瀏覽器解析方式不同）。body或者html在本例中沒有設置高度，div的高度自適應沒有參照物，也就無法生效。
接下來在CSS中設置body和html的高度，就可解決div的高度自適應問題。body和html的高度直接設置為100%即可，不會對頁面有任何影響。在div_2.htmd的CSS部分加入如代碼11.4所示的代碼。
代碼11.4 設置div樣式：div_2.htm
html,body{height:100%;}
為了考慮多種瀏覽器的兼容性，html和body同時設置100%寬度。在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.4所示。
調整瀏覽器高度后，第2個div的高度隨之變化。各種瀏覽器對XHTML和CSS的解析方式有差異，在后面將詳細討論解決辦法，以解決瀏覽器的兼容性問題。
圖11.4 設置div標簽高度自適應
11.1.4 布局頁面的寬度
由于瀏覽者的顯示分辨率不同，瀏覽者常見顯示分辨率（單位：像素）為800×600、1024×768、1280×1024、1440×960等。所以在布局頁面時，要充分考慮頁面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過顯示寬度，頁面將出現(xiàn)水平滾動條。
— 說明：盡量保證網(wǎng)頁只有垂直滾動條，才符合瀏覽者的習慣，所以高度不需要考慮，由頁面內(nèi)容決定網(wǎng)頁高度。
頁面布局寬度一般考慮最小顯示分辨率的瀏覽用戶，即過去瀏覽用戶的顯示分辨率最小為800×600（15寸CRT顯示器），其最小寬度為800像素。瀏覽器的邊框及滾動條部分約占24像素左右，所以布局寬度為分辨率的水平像素減去24像素。所以過去網(wǎng)頁布局寬度一般為778像素，再寬就會使頁面產(chǎn)生水平滾動條。
由于計算機設備的飛速發(fā)展，現(xiàn)在使用800×600顯示分辨率的用戶很少了，現(xiàn)在頁面布局寬度最大不超過1002 ~1003像素（考慮到最小寬度1024像素，即1024×768顯示分辨率）。
11.1.5 布局頁面水平居中
為了適應不同瀏覽用戶的分辨率，網(wǎng)頁設計師要始終保證頁面整體內(nèi)容在頁面居中。使用HTML表格布局頁面時，只需要設置布局表格的align屬性為center即可。而div居中沒有屬性可以設置，只能通過CSS控制其位置。
在布局頁面前，網(wǎng)頁制作者一定要把頁面的默認邊距清除。為了方便操作，常用的方法是使用通配選擇符*，將所有對象的邊距清除，即margin屬性和padding屬性。margin屬性代表對象的外邊距（上、下、左、右），padding屬性代表對象的內(nèi)邊距，也叫填充（上、下、左、右）。
— 說明：margin屬性和padding屬性類似于表格單元格的cellspacing屬性和cellpadding屬性，不過margin屬性和padding屬性作用于所有塊狀元素。
使div元素水平居中的方法有多種，常用的方法是用CSS設置div的左右邊距，即margin-left屬性和margin-right屬性。當設置div左外邊距和右外邊距的值為auto，即自動時，左外邊距和右外邊距將相等，即達到了div水平居中的效果。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_align.htm，編寫div_align.htm文件代碼如代碼11.5所示。
代碼11.5 設置div水平居中：div_align.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">
*{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>
<div id="all">布局頁面內(nèi)容</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_align.htm，瀏覽效果如圖11.5所示。
是不是很簡單？設置外邊距的CSS代碼可以進一步簡化，使用margin屬性，編寫方法為：
margin:0px auto;
圖11.5 設置div水平居中
margin屬性值前面的0代表上邊距和下邊距為0像素，auto代表左邊距和右邊距為auto，即自動設置。讀者注意，0px和auto之間使用空格符號分隔，而不是逗號。還有一種方法是使用html或body的text-align屬性，設置其值為center，即所有對象將居中。這樣將導致頁面文本居中，所以不作推薦，其編寫方法為：
html,body{text-align:center;}
#p#
XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。
11.1.6 div元素的嵌套
類似于表格布局頁面，為了實現(xiàn)復雜的布局結構，div元素也需要互相嵌套。不過在布局頁面時盡量少嵌套，因為XHTML元素多重嵌套將影響瀏覽器對代碼的解析速度。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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">
<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">
*{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 id="all">
<div id="one">頂部</div>
<div id="two">底部</div>
</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。本示例綜合了div居中的知識，內(nèi)部的2個div水平居中在其父容器（外部div）中。在瀏覽器地址欄輸入http://localhost/div_div.htm，瀏覽效果如圖11.6所示。
圖11.6 div嵌套
11.1.7 div元素的浮動
作為塊狀元素，通過div布局網(wǎng)頁，CSS設置其屬性，完全符合內(nèi)容與表現(xiàn)分離。不過一個div標簽占據(jù)一行，怎樣實現(xiàn)布局中并列的2塊區(qū)域呢？塊狀元素有一個很重要的“float”屬性，可以使多個塊狀元素并列于一行。
float屬性也被稱為浮動屬性，這個詞非常形象。對前面的div元素設置浮動屬性后，當前面的div元素留有足夠的空白寬度時，后面的div元素將自動浮上來，和前面的div元素并列于一行。float屬性的值有l(wèi)eft、right、none和inherit。很多對象都有inherit屬性，這是繼承屬性，代表繼承父容器的屬性。float屬性值為none時，塊狀元素不會浮動，這也是塊狀元素的默認值。float屬性值為left時，塊狀元素將向左浮動；float屬性值為right時，塊狀元素將向右浮動。
— 注意：使2個div并列于一行的前提是：這一行有足夠的寬度容納2個div的寬度。
（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_float.htm，編寫div_float.htm文件代碼如代碼11.7所示。
代碼11.7 設置div浮動：div_float.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">
*{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>
<div id="one">第1個div</div>
<div id="two">第2個div</div>
</body>
</html>
（2）為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_float.htm，瀏覽效果如圖11.7所示。
（3）筆者只設置了第1個div元素向左浮動，第2個div元素“流”上來了，并緊挨著第1個div元素。設置第2個div向右浮動如代碼11.8所示。
代碼11.8 設置div浮動：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 設置div向左浮動 圖11.8 div左浮動和右浮動
（5）這時，第2個div緊挨著其父容器（瀏覽器）的右邊框，當然，這2個div元素也可以換個位置，即設置CSS如代碼11.9所示。
代碼11.9 設置div浮動：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浮動方向
浮動屬性是CSS布局的最佳利器，可以通過不同的浮動屬性值靈活地定位div元素，以達到靈活布局網(wǎng)頁的目的。塊狀元素（包括div）浮動的范圍由其被包含的父容器所決定，以上實例div元素的父容器就是body或html。
為了更加靈活地定位div元素，CSS提供了clear屬性，中文意思即為“清除”。clear屬性的值有none、left、right和both，默認值為none。當多個塊狀元素由于第1個設置浮動屬性而并列時，如果某個元素不需要被“流”上去，即可設置相應的clear屬性。
（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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">
<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">
*{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 class="all">
<div class="one">第1個div</div>
<div class="two">第2個div</div>
<div id="three_1">第3個div（clear:none;）</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div class="two">第2個div</div>
<div id="three_2">第3個div（clear:both;）</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div id="three_3">第2個div（clear:right;）</div>
<div class="two">第3個div</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div id="three_4">第2個div（clear:left;）</div>
<div class="two">第3個div</div>
</div>
</body>
</html>
（2）為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。在瀏覽器地址欄輸入http://localhost/div_clear.htm，瀏覽效果如圖11.10所示。
圖11.10 div清除屬性
— 第1種情況為默認情況，即clear屬性值為none，由于前面的div都設置了浮動屬性（1個向左浮動，1個向右浮動），所以第3個div元素自動“流”上去，處于2個div之間的空白處。
— 第2種情況clear屬性值為both，即不管前面的div設置向左浮動還是向右浮動，此div元素不自動“流”上去。其不受浮動影響，保持在底部不動。
— 第3種情況clear屬性值為right，第2個div兩邊都有浮動的div，但不允許向右浮動的div處于同一行，所以第3個div元素自動換行。
— 第4種情況clear屬性值為left，第2個div兩邊都有浮動的div，但不允許向右浮動的div處于同一行，所以第2個div元素自動換行。
通過clear屬性，div元素的定位更加方便自如，希望讀者多加練習。
#p#
XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。
11.1.8 一些高級的div布局技巧
為了滿足更多布局的要求，本節(jié)特別選擇幾個常用布局技巧。
（1）右邊div元素寬度自適應。本例為并排2個div，其中左邊的div為固定寬度，右邊div為自適應寬度。常用于文章列表和文章內(nèi)容的頁面布局。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_demo.htm，編寫div_demo.htm文件代碼如代碼11.11所示。
代碼11.11 右邊div元素寬度自適應：div_demo.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">
*{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>
<div id="one">第1個div</div>
<div id="two">第2個div</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo.htm，瀏覽效果如圖11.11所示。
筆者特意把2個div設置為向右浮動，第1個div元素為自適應寬度，而第2個div元素為固定寬度。本例為了防止讀者的一個錯覺，即前面的div浮動后一定在左邊，其實左右方向取決于div元素浮動屬性的值。
（2）div內(nèi)容居中。這是很多網(wǎng)站需要用到的居中示例，即保持div包含內(nèi)容的水平和垂直居中。在D:\web\目錄下創(chuàng)建img目錄，放入一個jpg格式圖片文件，并命名為cs.jpg，在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_demo2.htm，編寫div_demo2.htm文件代碼如代碼11.12所示。
圖11.11 右邊div元素寬度自適應
代碼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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div內(nèi)容居中</title>
<style type="text/css">
*{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 class="center">
我在中間
</div>
<div class="center">
<img src="img/cs.jpg" width="120" height="120" />
</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo2.htm，瀏覽效果如圖11.12所示。
圖11.12 div內(nèi)容居中
筆者在這里用了text-align屬性，即內(nèi)含內(nèi)容水平居中，也用了line-height屬性，這是行距屬性，當設置為div的高度時，其所含內(nèi)容就垂直居中了。
11.1.9 一個典型的網(wǎng)頁布局實例
本節(jié)綜合前面學習的布局知識，制作比較典型的網(wǎng)頁布局實例，先分析這個例子布局的要求。這個例子要求頁面有上下4行區(qū)域，分別用作廣告區(qū)、導航區(qū)、主體區(qū)和版權信息區(qū)。而主體區(qū)又分為左右2個大區(qū)，左區(qū)域用于文章列表，右區(qū)域用于8個主體內(nèi)容區(qū)?？瓷先ゲ季謪^(qū)域比較多，用表格布局需要很多行代碼才能完成。利用div和CSS可以很好地完成，并且代碼比較簡練。
根據(jù)實例要求作圖，并分析布局的結構，從而方便編寫div布局的結構代碼，筆者做分析圖如圖11.13所示，并在每個區(qū)域做了id命名（#符號開頭），以方便div編寫。
圖11.13 網(wǎng)頁布局結構分析
從分析圖可以看出整個頁面的結構，其中，#top代表廣告區(qū)、#nav代表導航區(qū)、#mid代表主體區(qū)、#left代表#mid所包含的左區(qū)域、#right代表#mid所包含的右邊區(qū)域、#bt代表版權信息區(qū)。
#right區(qū)域包含8個具體內(nèi)容區(qū)，由于這些內(nèi)容區(qū)的尺寸相同，所以在實例中將會使用class選擇符作為統(tǒng)一樣式，對這個8個區(qū)域進行CSS樣式指定。根據(jù)結構分析圖可以編寫XHTML部分的結構代碼，編寫如下：
<div id="top">頂部廣告區(qū)</div>
<div id="nav">導航區(qū)</div>
<div id="mid">
<div id="left">縱向導航區(qū)</div>
<div id="right">
<div class="content">內(nèi)容A</div>
<div class="content">內(nèi)容B</div>
<div class="content">內(nèi)容C</div>
<div class="content">內(nèi)容D</div>
<div class="content">內(nèi)容E</div>
<div class="content">內(nèi)容F</div>
<div class="content">內(nèi)容G</div>
<div class="content">內(nèi)容H</div>
</div>
</div>
<div id="footer">底部版權區(qū)</div>
筆者在8個具體內(nèi)容區(qū)用了同一個class名稱的選擇符，用于在CSS中指定統(tǒng)一的樣式。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_page.htm，編寫div_page.htm文件代碼如代碼11.13所示。
代碼11.13 div網(wǎng)頁布局：div_page.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>網(wǎng)頁布局實例</title>
<style type="text/css">
* {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 id="nav">導航區(qū)</div>
<div id="mid">
<div id="left">縱向導航區(qū)</div>
<div id="right">
<div class="content">內(nèi)容A</div>
<div class="content" id="content2">內(nèi)容B</div>
<div class="content">內(nèi)容C</div>
<div class="content" id="content2">內(nèi)容D</div>
<div class="content" id="content2">內(nèi)容E</div>
<div class="content">內(nèi)容F</div>
<div class="content" id="content2">內(nèi)容G</div>
<div class="content">內(nèi)容H</div>
</div>
</div>
<div id="footer">底部版權區(qū)</div>
</body>
</html>
筆者稍微修改了XHTML部分的代碼，選了4個具體內(nèi)容區(qū)加上了id名稱為content2的屬性，這是為了使這4個區(qū)域有不同的背景色。在瀏覽器地址欄輸入http://localhost/ div_page.htm，瀏覽效果如圖11.13所示。
本例綜合了前面的布局知識，如居中等。不過，而由CSS代碼可得，主體內(nèi)容區(qū)（id名稱為mid）的寬度是500像素，高度是300像素。通過分析圖可以觀察得出以下關系公式：
主體內(nèi)容區(qū)寬度=縱向導航區(qū)寬度+具體內(nèi)容區(qū)寬度×4
主體內(nèi)容區(qū)高度=縱向導航區(qū)高度=具體內(nèi)容區(qū)高度×2
在CSS代碼中，縱向導航區(qū)（id名稱為left）的寬度只有98像素，高度為298像素。而右邊具體內(nèi)容區(qū)（class名稱為content）的寬度也只有98像素，高度為148像素，可得：
縱向導航區(qū)寬度+具體內(nèi)容區(qū)寬度×4=490（像素）
縱向導航區(qū)高度=298（像素）
具體內(nèi)容區(qū)高度×2=296（像素）
主體內(nèi)容區(qū)（id名稱為mid）的寬度與高度為什么會與內(nèi)含的div寬度有偏差？這涉及瀏覽器解析CSS時對寬度和高度的計算方法，IE7.0瀏覽器和FireFox瀏覽器解析div的寬度和高度設置值并不包括邊框。由CSS代碼可得，縱向導航區(qū)（id名稱為left）和具體內(nèi)容區(qū)（class名稱為content）的邊框為1像素粗，所以關系公式應該進一步修改為：
圖11.14 網(wǎng)頁布局實例
主體內(nèi)容區(qū)寬度=縱向導航區(qū)寬度+縱向導航區(qū)邊框×2+具體內(nèi)容區(qū)寬度×4+具體內(nèi)容區(qū)邊框×8
主體內(nèi)容區(qū)高度=縱向導航區(qū)高度+縱向導航區(qū)邊框×2=具體內(nèi)容區(qū)高度×2+具體內(nèi)容區(qū)邊框×4
寬度和高度的計算是合理布局頁面的很重要的基礎，一旦計算有誤將導致頁面布局混亂。并且針對不同瀏覽器有不同計算辦法，本書示例使用IE7.0瀏覽器，本書后面章節(jié)將學習不同瀏覽器的兼容性解決辦法。
— 注意：在寬度和高度的計算中，IE6.0以前版本的瀏覽器解析div的寬度和高度設置值包括邊框，如果讀者使用的是IE6.0以前版本的瀏覽器，嘗試修改寬度值以達到圖11.14的效果。
通過上一章的學習，讀者了解到了CSS強大的表現(xiàn)控制功能，特別是在布局方面有很大的優(yōu)勢。相對于代碼條理混亂、樣式雜糅在結構中的表格布局，CSS將帶來全新的布局方法，讓網(wǎng)頁設計師更輕松、更自由。本章通過多個示例展示CSS布局網(wǎng)頁的方法，并對CSS的“盒模型”作詳細闡述。相信讀者在深入理解“盒模型”后，布局網(wǎng)頁、定位CSS網(wǎng)頁元素將更加自如。
11.1 什么叫“Div+CSS”
上一章學習了Web標準的概念以及XHTML和CSS的基本知識。XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。Web標準不僅僅指用div標簽布局（有時候也用其他標簽布局），其含義非常廣，需要代碼編寫良好的結構，有良好的語義以及可讀性等。
所以“Div+CSS”制作的網(wǎng)頁不一定符合Web標準，而符合Web標準的網(wǎng)頁不一定完全由div標簽布局。
11.1.1 初識div
div標簽在Web標準的網(wǎng)頁中使用非常頻繁，那么，相對于其他HTML繼承而來的元素，div有什么特別之處呢？答案可能令讀者失望，div標簽什么特性也沒有，一定要說其特性，不過是一種塊狀元素。正因為div沒有任何特性，所以更容易被CSS代碼控制樣式。
div標簽是雙標簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容，包括其他的div標簽。也就是說，div標簽是一個沒有任何特性的容器而已。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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標簽中的內(nèi)容</div>
<div>我是第2個div標簽中的內(nèi)容</div>
<div>我是第3個div標簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.1所示。沒有CSS的幫助下，div標簽沒有任何特別之處，只是無論怎么調整瀏覽器窗口，每個div標簽占據(jù)一行。即默認情況下，一行只能容納一個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標簽中的內(nèi)容</div>
<div id="mid">第2個div標簽中的內(nèi)容</div>
<div id="bt">第3個div標簽中的內(nèi)容</div>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/div.htm，瀏覽效果如圖11.2所示。
圖11.1 默認的div標簽 圖11.2 設置背景的div標簽
通過背景色的設置，可以從圖11.2中看到div標簽默認占據(jù)一行，寬度也為一行的寬度。通過寬度的設置可以發(fā)現(xiàn)，并不是因為div的寬度為一行導致無法容納后面的div標簽。無論寬度多小，一行始終只有一個div標簽，讀者須謹記。
div標簽作為網(wǎng)頁CSS布局的主力元素，其優(yōu)勢已經(jīng)非常明顯。相對于表格布局，div更加靈活，因為div只是一個沒有任何特性的容器，CSS可以非常靈活地對其進行控制，組成網(wǎng)頁的每一塊區(qū)域。在大多數(shù)情況下，僅僅通過div標簽和CSS的配合即可完成頁面的布局，也難怪很多人稱Web標準頁為“Div+CSS”網(wǎng)頁了。
11.1.2 XHTML中的塊狀元素和內(nèi)聯(lián)元素
上一節(jié)提到了XHTML的布局核心標簽是div，并且div屬于XHTML中的塊級元素。XHTML的標簽默認為2種元素。
（1）塊狀元素。該元素是矩形的，有自己的高度和寬度。默認情況下，在父容器中占據(jù)一行，同一行無法容納其他元素及文本。其他的元素將顯示在其下一行，可以看做被塊級元素“擠”下去的。塊狀元素就是一個矩形容器，邊緣非常硬，CSS設置了高度和寬度后，形狀無法被改變。
（2）內(nèi)聯(lián)元素。和塊級元素相反，內(nèi)聯(lián)元素沒有固定形狀，也無法設置寬度和高度。內(nèi)聯(lián)元素形狀由其內(nèi)含的內(nèi)容決定，所以在寬度足夠的情況下，一行能容納多個內(nèi)聯(lián)元素。有人說相對于塊狀元素是一個硬盒子，內(nèi)聯(lián)元素就是一個軟軟的布袋子（形狀由內(nèi)容決定）。
塊狀元素適合于大塊的區(qū)域排版，所以常用來布局頁面。而內(nèi)聯(lián)元素適合于局部元素的樣式設置，所以常用于局部的文字樣式設置。
11.1.3 div元素的樣式設置
讀者要使用div元素進行網(wǎng)頁布局，首先須學會使用CSS靈活地設置div元素的樣式。本節(jié)就幾個常用的示例學習div元素的多種樣式設置，使讀者快速理解div元素。作為單個div元素，width屬性用于設置其寬度，height屬性設置其高度。由于網(wǎng)頁大多數(shù)用于計算機顯示屏幕作媒介，所以常用像素作為固定尺寸的單位，即px。
— 注意：在HTML元素中設置樣式不需要填寫單位，默認為像素。
當單位為百分比時，div元素的寬度和高度為自適應狀態(tài)，即寬度和高度適應瀏覽器窗口尺寸而變化。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_2.htm，編寫div_2.htm文件代碼如代碼11.3所示。
代碼11.3 設置div樣式：div_2.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">
#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">這是自適應尺寸的寬度和高度</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給2個div都設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.3所示。
圖11.3 設置div樣式
很明顯，第1個div寬度和高度固定，形成了一個“堅硬”的盒子。而第2個div由于設置其寬度為50%，其寬度隨著瀏覽器的寬度變化而變化。但是問題出現(xiàn)了，第2個div的高度雖然設置為25%，按理說其高度應該隨著瀏覽器的高度變化而變化。然而在示例中div高度僅和文本高度相當，好像高度設置沒有起作用。
其實設置高度自適應有一個前提，div的高度自適應是相對于父容器的高度，本例中div父容器為body或者html（不同瀏覽器解析方式不同）。body或者html在本例中沒有設置高度，div的高度自適應沒有參照物，也就無法生效。
接下來在CSS中設置body和html的高度，就可解決div的高度自適應問題。body和html的高度直接設置為100%即可，不會對頁面有任何影響。在div_2.htmd的CSS部分加入如代碼11.4所示的代碼。
代碼11.4 設置div樣式：div_2.htm
html,body{height:100%;}
為了考慮多種瀏覽器的兼容性，html和body同時設置100%寬度。在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.4所示。
調整瀏覽器高度后，第2個div的高度隨之變化。各種瀏覽器對XHTML和CSS的解析方式有差異，在后面將詳細討論解決辦法，以解決瀏覽器的兼容性問題。
圖11.4 設置div標簽高度自適應
11.1.4 布局頁面的寬度
由于瀏覽者的顯示分辨率不同，瀏覽者常見顯示分辨率（單位：像素）為800×600、1024×768、1280×1024、1440×960等。所以在布局頁面時，要充分考慮頁面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過顯示寬度，頁面將出現(xiàn)水平滾動條。
— 說明：盡量保證網(wǎng)頁只有垂直滾動條，才符合瀏覽者的習慣，所以高度不需要考慮，由頁面內(nèi)容決定網(wǎng)頁高度。
頁面布局寬度一般考慮最小顯示分辨率的瀏覽用戶，即過去瀏覽用戶的顯示分辨率最小為800×600（15寸CRT顯示器），其最小寬度為800像素。瀏覽器的邊框及滾動條部分約占24像素左右，所以布局寬度為分辨率的水平像素減去24像素。所以過去網(wǎng)頁布局寬度一般為778像素，再寬就會使頁面產(chǎn)生水平滾動條。
由于計算機設備的飛速發(fā)展，現(xiàn)在使用800×600顯示分辨率的用戶很少了，現(xiàn)在頁面布局寬度最大不超過1002 ~1003像素（考慮到最小寬度1024像素，即1024×768顯示分辨率）。
11.1.5 布局頁面水平居中
為了適應不同瀏覽用戶的分辨率，網(wǎng)頁設計師要始終保證頁面整體內(nèi)容在頁面居中。使用HTML表格布局頁面時，只需要設置布局表格的align屬性為center即可。而div居中沒有屬性可以設置，只能通過CSS控制其位置。
在布局頁面前，網(wǎng)頁制作者一定要把頁面的默認邊距清除。為了方便操作，常用的方法是使用通配選擇符*，將所有對象的邊距清除，即margin屬性和padding屬性。margin屬性代表對象的外邊距（上、下、左、右），padding屬性代表對象的內(nèi)邊距，也叫填充（上、下、左、右）。
— 說明：margin屬性和padding屬性類似于表格單元格的cellspacing屬性和cellpadding屬性，不過margin屬性和padding屬性作用于所有塊狀元素。
使div元素水平居中的方法有多種，常用的方法是用CSS設置div的左右邊距，即margin-left屬性和margin-right屬性。當設置div左外邊距和右外邊距的值為auto，即自動時，左外邊距和右外邊距將相等，即達到了div水平居中的效果。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_align.htm，編寫div_align.htm文件代碼如代碼11.5所示。
代碼11.5 設置div水平居中：div_align.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">
*{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>
<div id="all">布局頁面內(nèi)容</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_align.htm，瀏覽效果如圖11.5所示。
是不是很簡單？設置外邊距的CSS代碼可以進一步簡化，使用margin屬性，編寫方法為：
margin:0px auto;
圖11.5 設置div水平居中
margin屬性值前面的0代表上邊距和下邊距為0像素，auto代表左邊距和右邊距為auto，即自動設置。讀者注意，0px和auto之間使用空格符號分隔，而不是逗號。還有一種方法是使用html或body的text-align屬性，設置其值為center，即所有對象將居中。這樣將導致頁面文本居中，所以不作推薦，其編寫方法為：
html,body{text-align:center;}
#p#
XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。
11.1.6 div元素的嵌套
類似于表格布局頁面，為了實現(xiàn)復雜的布局結構，div元素也需要互相嵌套。不過在布局頁面時盡量少嵌套，因為XHTML元素多重嵌套將影響瀏覽器對代碼的解析速度。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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">
<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">
*{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 id="all">
<div id="one">頂部</div>
<div id="two">底部</div>
</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。本示例綜合了div居中的知識，內(nèi)部的2個div水平居中在其父容器（外部div）中。在瀏覽器地址欄輸入http://localhost/div_div.htm，瀏覽效果如圖11.6所示。
圖11.6 div嵌套
11.1.7 div元素的浮動
作為塊狀元素，通過div布局網(wǎng)頁，CSS設置其屬性，完全符合內(nèi)容與表現(xiàn)分離。不過一個div標簽占據(jù)一行，怎樣實現(xiàn)布局中并列的2塊區(qū)域呢？塊狀元素有一個很重要的“float”屬性，可以使多個塊狀元素并列于一行。
float屬性也被稱為浮動屬性，這個詞非常形象。對前面的div元素設置浮動屬性后，當前面的div元素留有足夠的空白寬度時，后面的div元素將自動浮上來，和前面的div元素并列于一行。float屬性的值有l(wèi)eft、right、none和inherit。很多對象都有inherit屬性，這是繼承屬性，代表繼承父容器的屬性。float屬性值為none時，塊狀元素不會浮動，這也是塊狀元素的默認值。float屬性值為left時，塊狀元素將向左浮動；float屬性值為right時，塊狀元素將向右浮動。
— 注意：使2個div并列于一行的前提是：這一行有足夠的寬度容納2個div的寬度。
（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_float.htm，編寫div_float.htm文件代碼如代碼11.7所示。
代碼11.7 設置div浮動：div_float.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">
*{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>
<div id="one">第1個div</div>
<div id="two">第2個div</div>
</body>
</html>
（2）為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_float.htm，瀏覽效果如圖11.7所示。
（3）筆者只設置了第1個div元素向左浮動，第2個div元素“流”上來了，并緊挨著第1個div元素。設置第2個div向右浮動如代碼11.8所示。
代碼11.8 設置div浮動：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 設置div向左浮動 圖11.8 div左浮動和右浮動
（5）這時，第2個div緊挨著其父容器（瀏覽器）的右邊框，當然，這2個div元素也可以換個位置，即設置CSS如代碼11.9所示。
代碼11.9 設置div浮動：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浮動方向
浮動屬性是CSS布局的最佳利器，可以通過不同的浮動屬性值靈活地定位div元素，以達到靈活布局網(wǎng)頁的目的。塊狀元素（包括div）浮動的范圍由其被包含的父容器所決定，以上實例div元素的父容器就是body或html。
為了更加靈活地定位div元素，CSS提供了clear屬性，中文意思即為“清除”。clear屬性的值有none、left、right和both，默認值為none。當多個塊狀元素由于第1個設置浮動屬性而并列時，如果某個元素不需要被“流”上去，即可設置相應的clear屬性。
（1）在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（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">
<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">
*{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 class="all">
<div class="one">第1個div</div>
<div class="two">第2個div</div>
<div id="three_1">第3個div（clear:none;）</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div class="two">第2個div</div>
<div id="three_2">第3個div（clear:both;）</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div id="three_3">第2個div（clear:right;）</div>
<div class="two">第3個div</div>
</div>
<div class="all">
<div class="one">第1個div</div>
<div id="three_4">第2個div（clear:left;）</div>
<div class="two">第3個div</div>
</div>
</body>
</html>
（2）為了更方便看到div的表現(xiàn)，筆者給內(nèi)部div設置了淺灰色背景色和黑色邊框，而外部的div為深紅色背景色。在瀏覽器地址欄輸入http://localhost/div_clear.htm，瀏覽效果如圖11.10所示。
圖11.10 div清除屬性
— 第1種情況為默認情況，即clear屬性值為none，由于前面的div都設置了浮動屬性（1個向左浮動，1個向右浮動），所以第3個div元素自動“流”上去，處于2個div之間的空白處。
— 第2種情況clear屬性值為both，即不管前面的div設置向左浮動還是向右浮動，此div元素不自動“流”上去。其不受浮動影響，保持在底部不動。
— 第3種情況clear屬性值為right，第2個div兩邊都有浮動的div，但不允許向右浮動的div處于同一行，所以第3個div元素自動換行。
— 第4種情況clear屬性值為left，第2個div兩邊都有浮動的div，但不允許向右浮動的div處于同一行，所以第2個div元素自動換行。
通過clear屬性，div元素的定位更加方便自如，希望讀者多加練習。
#p#
XHTML主要用div標簽進行網(wǎng)頁的布局，而控制布局的工具是CSS代碼，以使網(wǎng)頁符合Web標準。所以很多網(wǎng)頁設計師把這種布局方法的網(wǎng)頁叫做“Div+CSS”網(wǎng)頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。
11.1.8 一些高級的div布局技巧
為了滿足更多布局的要求，本節(jié)特別選擇幾個常用布局技巧。
（1）右邊div元素寬度自適應。本例為并排2個div，其中左邊的div為固定寬度，右邊div為自適應寬度。常用于文章列表和文章內(nèi)容的頁面布局。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_demo.htm，編寫div_demo.htm文件代碼如代碼11.11所示。
代碼11.11 右邊div元素寬度自適應：div_demo.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">
*{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>
<div id="one">第1個div</div>
<div id="two">第2個div</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo.htm，瀏覽效果如圖11.11所示。
筆者特意把2個div設置為向右浮動，第1個div元素為自適應寬度，而第2個div元素為固定寬度。本例為了防止讀者的一個錯覺，即前面的div浮動后一定在左邊，其實左右方向取決于div元素浮動屬性的值。
（2）div內(nèi)容居中。這是很多網(wǎng)站需要用到的居中示例，即保持div包含內(nèi)容的水平和垂直居中。在D:\web\目錄下創(chuàng)建img目錄，放入一個jpg格式圖片文件，并命名為cs.jpg，在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_demo2.htm，編寫div_demo2.htm文件代碼如代碼11.12所示。
圖11.11 右邊div元素寬度自適應
代碼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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div內(nèi)容居中</title>
<style type="text/css">
*{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 class="center">
我在中間
</div>
<div class="center">
<img src="img/cs.jpg" width="120" height="120" />
</div>
</body>
</html>
為了更方便看到div的表現(xiàn)，筆者給div設置了淺灰色背景色和黑色邊框。在瀏覽器地址欄輸入http://localhost/div_demo2.htm，瀏覽效果如圖11.12所示。
圖11.12 div內(nèi)容居中
筆者在這里用了text-align屬性，即內(nèi)含內(nèi)容水平居中，也用了line-height屬性，這是行距屬性，當設置為div的高度時，其所含內(nèi)容就垂直居中了。
11.1.9 一個典型的網(wǎng)頁布局實例 本節(jié)綜合前面學習的布局知識，制作比較典型的網(wǎng)頁布局實例，先分析這個例子布局的要求。這個例子要求頁面有上下4行區(qū)域，分別用作廣告區(qū)、導航區(qū)、主體區(qū)和版權信息區(qū)。而主體區(qū)又分為左右2個大區(qū)，左區(qū)域用于文章列表，右區(qū)域用于8個主體內(nèi)容區(qū)?？瓷先ゲ季謪^(qū)域比較多，用表格布局需要很多行代碼才能完成。利用div和CSS可以很好地完成，并且代碼比較簡練。
根據(jù)實例要求作圖，并分析布局的結構，從而方便編寫div布局的結構代碼，筆者做分析圖如圖11.13所示，并在每個區(qū)域做了id命名（#符號開頭），以方便div編寫。
圖11.13 網(wǎng)頁布局結構分析
從分析圖可以看出整個頁面的結構，其中，#top代表廣告區(qū)、#nav代表導航區(qū)、#mid代表主體區(qū)、#left代表#mid所包含的左區(qū)域、#right代表#mid所包含的右邊區(qū)域、#bt代表版權信息區(qū)。
#right區(qū)域包含8個具體內(nèi)容區(qū)，由于這些內(nèi)容區(qū)的尺寸相同，所以在實例中將會使用class選擇符作為統(tǒng)一樣式，對這個8個區(qū)域進行CSS樣式指定。根據(jù)結構分析圖可以編寫XHTML部分的結構代碼，編寫如下：
<div id="top">頂部廣告區(qū)</div>
<div id="nav">導航區(qū)</div>
<div id="mid">
<div id="left">縱向導航區(qū)</div>
<div id="right">
<div class="content">內(nèi)容A</div>
<div class="content">內(nèi)容B</div>
<div class="content">內(nèi)容C</div>
<div class="content">內(nèi)容D</div>
<div class="content">內(nèi)容E</div>
<div class="content">內(nèi)容F</div>
<div class="content">內(nèi)容G</div>
<div class="content">內(nèi)容H</div>
</div>
</div>
<div id="footer">底部版權區(qū)</div>
筆者在8個具體內(nèi)容區(qū)用了同一個class名稱的選擇符，用于在CSS中指定統(tǒng)一的樣式。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為div_page.htm，編寫div_page.htm文件代碼如代碼11.13所示。
代碼11.13 div網(wǎng)頁布局：div_page.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>網(wǎng)頁布局實例</title>
<style type="text/css">
* {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 id="nav">導航區(qū)</div>
<div id="mid">
<div id="left">縱向導航區(qū)</div>
<div id="right">
<div class="content">內(nèi)容A</div>
<div class="content" id="content2">內(nèi)容B</div>
<div class="content">內(nèi)容C</div>
<div class="content" id="content2">內(nèi)容D</div>
<div class="content" id="content2">內(nèi)容E</div>
<div class="content">內(nèi)容F</div>
<div class="content" id="content2">內(nèi)容G</div>
<div class="content">內(nèi)容H</div>
</div>
</div>
<div id="footer">底部版權區(qū)</div>
</body>
</html>
筆者稍微修改了XHTML部分的代碼，選了4個具體內(nèi)容區(qū)加上了id名稱為content2的屬性，這是為了使這4個區(qū)域有不同的背景色。在瀏覽器地址欄輸入http://localhost/ div_page.htm，瀏覽效果如圖11.13所示。
本例綜合了前面的布局知識，如居中等。不過，而由CSS代碼可得，主體內(nèi)容區(qū)（id名稱為mid）的寬度是500像素，高度是300像素。通過分析圖可以觀察得出以下關系公式：
主體內(nèi)容區(qū)寬度=縱向導航區(qū)寬度+具體內(nèi)容區(qū)寬度×4
主體內(nèi)容區(qū)高度=縱向導航區(qū)高度=具體內(nèi)容區(qū)高度×2
在CSS代碼中，縱向導航區(qū)（id名稱為left）的寬度只有98像素，高度為298像素。而右邊具體內(nèi)容區(qū)（class名稱為content）的寬度也只有98像素，高度為148像素，可得：
縱向導航區(qū)寬度+具體內(nèi)容區(qū)寬度×4=490（像素）
縱向導航區(qū)高度=298（像素）
具體內(nèi)容區(qū)高度×2=296（像素）
主體內(nèi)容區(qū)（id名稱為mid）的寬度與高度為什么會與內(nèi)含的div寬度有偏差？這涉及瀏覽器解析CSS時對寬度和高度的計算方法，IE7.0瀏覽器和FireFox瀏覽器解析div的寬度和高度設置值并不包括邊框。由CSS代碼可得，縱向導航區(qū)（id名稱為left）和具體內(nèi)容區(qū)（class名稱為content）的邊框為1像素粗，所以關系公式應該進一步修改為：
圖11.14 網(wǎng)頁布局實例
主體內(nèi)容區(qū)寬度=縱向導航區(qū)寬度+縱向導航區(qū)邊框×2+具體內(nèi)容區(qū)寬度×4+具體內(nèi)容區(qū)邊框×8
主體內(nèi)容區(qū)高度=縱向導航區(qū)高度+縱向導航區(qū)邊框×2=具體內(nèi)容區(qū)高度×2+具體內(nèi)容區(qū)邊框×4
寬度和高度的計算是合理布局頁面的很重要的基礎，一旦計算有誤將導致頁面布局混亂。并且針對不同瀏覽器有不同計算辦法，本書示例使用IE7.0瀏覽器，本書后面章節(jié)將學習不同瀏覽器的兼容性解決辦法。
— 注意：在寬度和高度的計算中，IE6.0以前版本的瀏覽器解析div的寬度和高度設置值包括邊框，如果讀者使用的是IE6.0以前版本的瀏覽器，嘗試修改寬度值以達到圖11.14的效果。
相關文章
本文主要介紹了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)換行的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需2022-06-16CSS布局之浮動(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考2021-09-23
這篇文章主要介紹了css實現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
這篇文章主要介紹了div水平布局兩邊對齊的三種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-01-21
waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-01-19
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實現(xiàn)方法。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-11-27- 這篇文章主要介紹了css實現(xiàn)六種自適應兩欄布局方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2020-10-28