簡單學習CSS網頁布局(初學者)

2024-07-11 08:43:55

字體：大中小

來源：轉載

供稿：網友

XHTML主要用div標簽進行網頁的布局，而控制布局的工具是CSS代碼，以使網頁符合Web標準。所以很多網頁設計師把這種布局方法的網頁叫做“Div+CSS”網頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div+CSS”的概念取代了Web標準。 CSS布局方法
通過上一章的學習，讀者了解到了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”網頁了。
11.1.2 XHTML中的塊狀元素和內聯元素
上一節提到了XHTML的布局核心標簽是div，并且div屬于XHTML中的塊級元素。XHTML的標簽默認為2種元素。
（1）塊狀元素。該元素是矩形的，有自己的高度和寬度。默認情況下，在父容器中占據一行，同一行無法容納其他元素及文本。其他的元素將顯示在其下一行，可以看做被塊級元素“擠”下去的。塊狀元素就是一個矩形容器，邊緣非常硬，CSS設置了高度和寬度后，形狀無法被改變。
（2）內聯元素。和塊級元素相反，內聯元素沒有固定形狀，也無法設置寬度和高度。內聯元素形狀由其內含的內容決定，所以在寬度足夠的情況下，一行能容納多個內聯元素。有人說相對于塊狀元素是一個硬盒子，內聯元素就是一個軟軟的布袋子（形狀由內容決定）。
塊狀元素適合于大塊的區域排版，所以常用來布局頁面。而內聯元素適合于局部元素的樣式設置，所以常用于局部的文字樣式設置。
11.1.3 div元素的樣式設置
讀者要使用div元素進行網頁布局，首先須學會使用CSS靈活地設置div元素的樣式。本節就幾個常用的示例學習div元素的多種樣式設置，使讀者快速理解div元素。作為單個div元素，width屬性用于設置其寬度，height屬性設置其高度。由于網頁大多數用于計算機顯示屏幕作媒介，所以常用像素作為固定尺寸的單位，即px。

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

當單位為百分比時，div元素的寬度和高度為自適應狀態，即寬度和高度適應瀏覽器窗口尺寸而變化。在D:/web/目錄下創建網頁文件（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的表現，筆者給2個div都設置了淺灰色背景色和黑色邊框，在瀏覽器地址欄輸入http://localhost/div_2.htm，瀏覽效果如圖11.3所示。

圖11.3 設置div樣式
很明顯，第1個div寬度和高度固定，形成了一個“堅硬”的盒子。而第2個div由于設置其寬度為50%，其寬度隨著瀏覽器的寬度變化而變化。但是問題出現了，第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等。所以在布局頁面時，要充分考慮頁面內容的布局寬度，一旦內容寬度超過顯示寬度，頁面將出現水平滾動條。

— 說明：盡量保證網頁只有垂直滾動條，才符合瀏覽者的習慣，所以高度不需要考慮，由頁面內容決定網頁高度。

頁面布局寬度一般考慮最小顯示分辨率的瀏覽用戶，即過去瀏覽用戶的顯示分辨率最小為800×600（15寸CRT顯示器），其最小寬度為800像素。瀏覽器的邊框及滾動條部分約占24像素左右，所以布局寬度為分辨率的水平像素減去24像素。所以過去網頁布局寬度一般為778像素，再寬就會使頁面產生水平滾動條。
由于計算機設備的飛速發展，現在使用800×600顯示分辨率的用戶很少了，現在頁面布局寬度最大不超過1002 ~1003像素（考慮到最小寬度1024像素，即1024×768顯示分辨率）。
11.1.5 布局頁面水平居中
為了適應不同瀏覽用戶的分辨率，網頁設計師要始終保證頁面整體內容在頁面居中。使用HTML表格布局頁面時，只需要設置布局表格的align屬性為center即可。而div居中沒有屬性可以設置，只能通過CSS控制其位置。
在布局頁面前，網頁制作者一定要把頁面的默認邊距清除。為了方便操作，常用的方法是使用通配選擇符*，將所有對象的邊距清除，即margin屬性和padding屬性。margin屬性代表對象的外邊距（上、下、左、右），padding屬性代表對象的內邊距，也叫填充（上、下、左、右）。

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

使div元素水平居中的方法有多種，常用的方法是用CSS設置div的左右邊距，即margin-left屬性和margin-right屬性。當設置div左外邊距和右外邊距的值為auto，即自動時，左外邊距和右外邊距將相等，即達到了div水平居中的效果。在D:/web/目錄下創建網頁文件（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">布局頁面內容</div>
</body>
</html>
為了更方便看到div的表現，筆者給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;}

上一篇：CSS 一些使用用法

下一篇：div+css table布局實現代碼