《CSS網站布局實錄》學習筆記（三）

第三章 CSS網頁布局與定位

3.1 div

　　幾乎XHTML中的任何標籤都可以用於浮動與定位，而div首當其衝。對於其他標籤而言，往往有它自身存在的目的，而div元素存在的目的就是為了浮動與定位。

3.1.1 div是什麼

　　div是XHTML中制定的、專門用於布局設計的容器物件。在傳統表格式布局中，之所以能夠進行頁面的排版布局設計，完全依賴於表格對象table。如今，接觸另一種布局方式——CSS布局。div正是這種布局方式的核心對象。僅從div的使用上說，做一個簡單的布局只需要依賴兩樣東西：div與CSS。因此有人稱CSS布局為div+css布局。

3.1.2 如何使用div

　　只需要應用<div></div>標籤，將內容放置其中，便可以應用div標籤。但是，div標籤之聲一個標識，作用是把內容標識成一個塊地區，並不負責其他事情。

　　div標籤中除了直接放入文本外，也可以放入其他標籤，還可以多個div進行嵌套使用，最終目的是合理地標識出內容地區。

　　在使用div標籤時，可以加入一些屬性，比如id、class、align、style等。在CSS布局方法，為了實現內容與表現的分離，不應當將align、style兩個屬性編寫在XHTML頁面的div標籤中，因此，最終的div代碼只能擁有以下兩種形式：

• <div id="id名稱">...</div>
• <div class="class名稱">...</div>

3.1.3 理解div

　　在一個沒有任何CSS應用的頁面中，即使應用了div，也沒有任何實際效果。那又如何理解div在布局上的重大潛能呢？嘗試編寫兩個div，用於左分欄與右分欄，代碼如下：

　　<div>左分欄</div>

　　<div>右分欄</div>

　　此時瀏覽器能夠看到的僅僅是上下兩行文字，並沒有看出div的任何特徵。

　　要記住一點，。XHTML中的所有對象，幾乎都預設為兩種物件類型：

• block塊狀對象：塊對象指的是當前對象顯示為一個方塊。預設顯示狀態下，它將佔據整行，其他的對象只能在下一行顯示。
• in-line行間對象（或者稱內嵌元素）：與block對象相反，它允許下一個對象與之共用一行進行顯示。

　　塊狀div說明，它在頁面中並非用於類似於文本那樣的行間排版，而是用於大面積，大地區的塊狀排版。

　　從頁面效果發現，網頁中除了文字之外，沒有任何其他效果。兩個div之間的關係只是前後關係，並沒有出現類似於表格的田字型，因此，div本身與樣式沒有任何關係。樣式是需要編寫CSS來實現的。

　　在CSS布局中，所要做的工作可以簡單歸集為兩件事：一是使用div將內容標記出來，二是為了這個div編寫所需的CSS樣式。

3.1.4 並列與嵌套div結構

　　div可以多層進行嵌套使用，嵌套的目的是為了實現更為複雜的頁面排版。比如：

　　<div id="header">頭部</div>

　　<div id="center">

　　　　<div id="left">左分欄</div>

　　　　<div id="right">右分欄</div>

　　</div>

　　<div id="footer">底部</div>

　　上述代碼中，為每個div定義了一個id名以供識別。可以看到id名為header、center和footer的3個div對象，它們之間屬於並列關係，在網頁布局結構中以垂直方向布局而至上而下。

　　在center中，為了內容的需要，又使用了一個左右分欄的布局，這兩個div本身是並列關係，而它們都處於center之中，因此它們與center形成了一種嵌套關係。

註：在適當情況下，應當儘可能少地使用嵌套，以保證瀏覽器不用過分消耗資源來對嵌套關係進行解析，簡單的嵌套結構更有利於對版式的理解與控制。

3.1.5 使用合適對象來布局

　　Web標準推薦使用儘可能符合頁面中元素意義的標籤來標識元素。在CSS布局中，要求儘可能多地使用XHTML所支援的各種標籤，最終網頁對象都將擁有良好的可讀性。再通過進一步的CSS定義，其樣式表現能力絲毫不比表格差，而且擁有比表格更多的樣式控制方法，這正體現了CSS布局的基本優勢。

　　XHTML標籤與功能簡述：　　

結構標籤	簡述
html	html跟元素
head	html頭部地區
body
div	區塊定義標籤
span	行間區塊定義標籤

	簡述
DOCTYPE	文件類型指定
title	瀏覽器標題列
link	連結到擴充資源
meta	Meta資訊
vstyle	樣式表地區

 

文本控制
p	段落
h1-h6	標題1-6級
strong	加重重點
em	重點/強調
abbr	定義文本的簡寫詞
acronym	定義首字母簡寫詞
address	標籤聯絡資訊
bdo	字母順序左右反轉
blockquote	塊狀引用內容
cite	行間引用內容
q	行間小型的引用
code	原始碼區
ins	編輯註解：插入內容
del	編輯註解：刪除內容
dfn	文本術語注釋
kbd	文本需要鍵盤輸入
pre	預格式化文本
samp	舉例
var	文本是一個變數
br	斷行符號

表格	簡述
table	表格
tr	行
td	儲存格
th	表頭
tbody	表格主體
thead	表格頭部
tfoot	表格底部
col	表格列
colgroup	表格列的集合
caption	表格標題

 

列表	簡述
ul	無序列表
ol	有序列表
li	清單項目
dl	帶描述的列表
dt	描述列表中的名詞
dd	描述列表中的描述

 

 

表單	簡述
form	表單區域
input	輸入框
textarea	文字框
select	下拉式清單
option	下拉式清單項
optgroup	下拉式清單項集合
button	按鈕
label	標籤
fieldset	標籤頁
legent	標籤頁的標題

表現	簡述
b	加粗
i	斜體
tt	打字機字型
sub	下標
sup	上標
big	加大
small	減小
hr	分割線

 

 

連結	簡述
a	連結
vbase	基礎連結類
指令碼	簡述
script	指令碼地區
noscript	無法執行指令碼的替代

映像和對象	簡述
img	插入映像
area	映像熱區細節
map	映像熱區
object	插入對象
param	對象的參數

 

　　上述列舉了全部的XHTML標籤對象，但並非所有對象都會經常使用到。

　　使用div設定一個帶有header、center和footer三個並列的布局，這3個div的基本表現形式正是：一列式布局。

　　一列式布局是所有布局的基礎，也是最簡單的布局形式。一列式布局是一種固定寬度的配置樣式。

預設狀態下，即在未設定div寬度的情況下，div將佔據整行空間。

3.3 一列寬度自適應

　　調適型配置是一種非常靈活的布局形式，它能夠根據瀏覽器視窗的大小，自動改變其寬度或高度值。

　　實際上，預設狀態下的div將佔據整行空間，即是寬度為100%的調適型配置。一列適應布局需要改變這個設定，將寬度由固定值改為百分比值的形式便可以完成。

　　 一列固定寬度置中　　

　　頁面整體置中是網頁設計中常見的形式。在傳統表格式布局中，使用表格的align="center"屬性來實現表格置中，再在其儲存格中裝內容，實現整個頁面置中。

　　而div本身也支援align="center"屬性，同樣可以讓div呈現置中狀態。但是，CSS布局是為了實現表現與內容的分離，align對齊屬性是一種樣式代碼，書寫在XHTML的div屬性中，有違於分離原則，因此應當使用CSS的方法來實現內容置中。置中的CSS樣式：margin: 0px auto;

　　除了直接使用數值外，margin還支援一個值叫auto的屬性值，auto值是讓瀏覽器自動判斷邊距。在這裡，給當前的div左右邊距設定為auto，瀏覽器就會將div的左右邊距設定成相同，從而呈現出置中的狀態。

margin屬性用於控制對象的上、右、下、左（順時針旋轉）4個方向的外邊距。當margin使用兩個參數時，第一個參數表示上下邊距，第二個參數則表示左右邊距。

3.4 二列固定寬度

　　對於二列布局自然需要用到兩個div。分別使用兩個id為left和right的div。為了實現二列式布局，必須使用另一個屬性——float。

　　float屬性是CSS布局中非常重要的一個屬性，用於控制對象的浮動布局。float的選擇性參數分別為：none/left/right。float使用none值時表示對象不浮動，使用left時對象將向左浮動，而使用right時對象將向右浮動。

3.5 二列寬度自適應

　　與一列自適應寬度布局設定一樣，是通過對百分比寬度值進行指派。比如：設定左欄寬度為20%，右欄寬度為70%。為什麼沒有將右欄設定為80%？

　　這是因為，在CSS布局中，一個對象的寬度不僅僅由width值來決定。對象的真實寬度是由對象本身的寬(width)、對象的左右外邊距(margin)以及左右邊框(border)，還有內邊距(padding)等屬性相加而成。

3.6 兩列右列寬度自適應

　　在實際應用中，有時候需要左欄固定寬度，而右欄根據瀏覽器視窗大小自適應。這隻需要設定左欄的寬度值，右欄不設定任何寬度值，並且右欄不浮動即可。

3.7 二列固定寬度置中

　　對於二列分類置中問題，再使用margin: 0px auto；似乎不能達到效果，這時就需要進行div的嵌套設計來完成。可以使用一個置中的div作為容器，將二列分欄的兩個div放置在容器中，從而實現二列置中顯示的效果。XHTML代碼結構如下：　

　　<div id="layout">

　　　　<div id="left">左列</div>

　　　　<div id="right">右列</div>

　　</div>

　　CSS代碼如下：

　　#layout {

　　　　margin: 0px auto;

　　　　...

　　}

3.8 三列浮動中間列寬度自適應

　　如果希望有一個三列式布局中的左欄要求固定寬度並居左顯示，右欄要求固定寬度並居右顯示，而中間欄需要在左欄和右欄的中央，並根據左右欄的間距自動適應。這個布局單純使用float屬性與百分比值並不能夠實現。因此需要尋找新的思路來解決。

　　絕對位置

　　絕對位置是通過position屬性來實現的。position的選擇性參數分別為：static/absolute/relative。

　　對頁面中的每個對象而言，預設的position屬性都是static。使用position: absolute;將會變為絕對位置模式。當使用此屬性時，可以使用top、right、bottom、left即上右下左4個方向的距離值，以確定對象的具體位置。CSS代碼如下：

　　#layout {

　　　　position: absolute;

　　　　top: 20px;

　　　　left: 0px;

　　}

　　設定top: 20px;時，它將永遠離瀏覽器視窗的上邊20px，而left: 0px;將保證它離瀏覽器左邊為0px。

註：如果一個對象被設定了position: absolute;，它將從本質上與其他對象分離出來。它的定位元模式不會影響其他對象，也不會被其他對象的浮動定位所影響。從某種意義上來講，使用絕對位置之後，對象就像一個圖層一樣漂浮在網頁之上。使用絕對位置之後的對象，不需要再考慮它的浮動關係，只要設定對象的top、right、bottom及left4個方向的值即可。

3.9 高度自適應

　　有些時候設定對象的height: 100%;並不能實現高度自適應的效果。CSS代碼如下：

   { :; :; }  { :; :; :; :; }

　　如上述代碼，對#left對象設定了height: 100%，然而，同時又設定了html與body的height: 100%，這就是高度自適應問題的關鍵所在。一個對象的高度是否可以使用百分比顯示，取決於對象的父級對象。

　　在頁面中，#left的父級對象是body，而在預設情況下，瀏覽器並沒有給body一個高度屬性，因此設定#left為height: 100%;並不會產生任何效果。但是，一旦給body設定了height: 100%之後，它的子級對象#left的height: 100%;便發生了作用，這便是瀏覽器解析規則引發的高度自適應問題。

3.10 盒模型詳解(Box Model)

　　盒模型是CSS中的一個核心概念。由於瀏覽器設計的原因，在不同瀏覽器下面，盒模型的實際表現不一樣。

3.10.1 什麼是盒模型

　　盒模型就是指CSS布局中的每一個元素，在瀏覽器的解釋中，都被當作一個盒狀物。瀏覽器通過這些盒狀物的大小和浮動方式來判斷下一個盒狀物是貼近顯示，還是下一行顯示，還是其他方式顯示。任何一個CSS布局的網頁，都是由許多不同大小的盒子所構成的。

3.10.2 盒模型的細節

　　如上面所述，只需要理解盒模型的寬度或高度，就能理解他們在布局中所佔據的位置。

　　在CSS的盒模型設計中，它的寬度和高度不僅僅由值width或height來提供，而是由一組屬性值組合而成。除了寬度或高度值外，對於盒模型對象而言，CSS還提供了內邊距(padding)、外邊距(margin)、邊框(border)三個屬性，用於控制一個對象的顯示細節。

總結：一個盒子（包含margin、border和padding）的實際佔用的空間為：

• 豎直方向：height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom
• 水平方向：width+border-left+border-right+margin-left+margin-right+padding-left+padding-right

3.10.3 上下margin疊加問題（margin重疊現象）

　　對象之間的間距是由兩個對象的盒模型的最終計算值得出的。理論上如此，但也有一種特殊情況，就是上下對象的間距問題。當兩個對象為上下關係時，而且都具備margin屬性的時候，此時由margin所造成的外邊距將出現疊加。比如：

   { :; :; :; :; :; }  { :; :; :; :; :; }

　　也許會認為，由於a對象有下邊距10px，b對象有上邊距10px，所以它們的上下距離應該為20px。實際上，它們的上下距離都是10px。引發這種問題的原因是由CSS設計所造成的。比如要對段落進行控制，多個p標籤形成段落，如果這些p標籤都具備margin: 10px;屬性的話，那麼它們中第一個段落的頂部外邊距是10px，而第一個段落與第二個段落之間的margin就成了20px，由此造成排序距離不一致，所以設計出這種空白邊疊加規則。

總結：空白邊疊加時，即上下相鄰的普通元素，上下邊距並非簡單的相加，而是取其較大的margin值為準。一旦把某個元素設定了float屬性，那麼它們將不再進行空白邊疊加。

3.10.4 左右margin加倍問題

　　當盒模型對象為浮動狀態時，很對象的左右margin會加倍。可以通過設定對象的display:inline;來解決。display屬性用於強制對象按一種顯示模式進行解析。

3.11 深入浮動(Float)

　　浮動是CSS布局中重要的理論。CSS網頁布局只能以兩種方式存在：一種是浮動式布局，另一種則是定位布局。這兩種定位方式的核心都脫離於文檔流的控制。

3.11.1 文檔流(Document Flow)

　　文檔流是瀏覽器解析網頁的一個重要概念，對於一個XHTML網頁，body元素下的任意元素，根據其前後順序，組成了一個個上下關係，這便是文檔流。文檔流是瀏覽器的預設顯示規則。

3.11.2 浮動定位

　　浮動定位的目的就是打破預設的按照文檔流的顯示規則，而按照布局要求進行顯示。這就需要利用float屬性。

3.11.3 浮動的清理(Clear)

　　清理是浮動中的另一個有用的工具。這需要利用clear屬性來拒絕某個方向的浮動。清理的一種方法就是清除某一側，比如：clear: left;來清理左側的浮動物件；另一種用法是，當浮動了許多元素後，突然需要另起一行，這時可以製作一個空白的div標籤，並使用clear: both;屬性來設定該div左右都拒絕浮動。

3.11.4 何時選用浮動定位

　　當需要網站有較強的對解析度及內容大小的適應能力時，就需要採用浮動定位。浮動定位能將布局浮在視窗之中，而不是固定在視窗的某個位置，所以其目的主要是針對非固定類型的網頁進行設計。

　　1. 置中布局

　　對一個元素置中，是相對於它的左右兩個邊而言。如果瀏覽器視窗的寬度不固定，那麼久需要用div，採用針對左右margin的auto設定，以便讓元素置中浮動。

　　2. 橫向寬度百分比縮放

　　如果有一個二列寬度調適型配置，當左列的寬度無法固定時，則右列的位置也就無法固定，因此右列必須浮動到左列的右邊貼近，才可以適應左列寬度的隨時變化。

　　3. 需要藉助margin、padding、border等屬性

　　浮動式布局能夠通過控制對象的邊框、間距等來精確地控制它們之間的位置關係，考慮到每個對象的外邊距不一樣，所以如果需要採用margin來控制對象佔位，也需要使用浮動定位。

3.12 絕對位置與相對定位

3.12.1 絕對位置

　　凡是採用position: absolute;後，對象便開始進行絕對位置，絕對位置主要通過設定對象的top、right、bottom和left四個方向的邊距值來實現。一旦對象被設定絕對位置，它就完全脫離了文檔流與浮動模型，獨立於其他對象而存在。CSS代碼如下：

    { :; :; :; :; :; :;  }   { :; :; :;  }   { :; :; :;  }

　　這時，b和d元素的位置由top值（上邊距）及left值（左邊距）而決定，他們已經脫離了a和c的浮動而自成一體，浮動在畫面之上。

　　深度(z-index)

　　由於b和d元素的位置由自身的邊距而決定，因此會出現一個問題，即元素的重疊。這種情況下，可以通過設定對象的z-index屬性，以設定其重疊的先後順序，也就是z軸的順序。CSS代碼如下：

{:;:;:;:;}{:;:;:;:;}

　　一開始沒有設定z-index屬性時，d元素位於b元素之上。當使用z-index屬性後，可以重新設定他們的z軸順序。

註：以z-index的數值大小為準，大值對象的層級位於小值對象之上。

3.12.2 相對定位

　　實際上，相對定位就是浮動定位與絕對位置的擴充方式。相對定位使得被設定元素保持與其原始位置相對，並不破壞其原始位置的資訊。position: relative;

　　不佔位的相對定位

　　當對象採用position: relative;時，該對象雖然進行了相對定位，但其原始的佔位資訊還存在於文檔流及浮動物件中。要想做到絕對位置那樣，完全獨立於其他對象，自身又可以做到相對定位，可以通過一組定位組合。XHTML代碼如下：

      a 　 b 　 c 　 d 

　　CSS代碼如下：

   { :;　 :; :; :; :; }  { :; :; :; :; :; :; }  { :; :; :; }

　　可以看到，b已經視線裡相對定位，而且沒有佔有空間，c和d也都順移到a的右邊。之所以能夠實現這樣的效果，就在於相對定位與絕對位置的組合。在這裡，對付對象divGroup設定position: relative;的絕對位置，但沒有設定它的top及left值，所以divGroup仍然可以當做浮動物件使用。同時，將b對象的定位方式由position: relative;改為position: absolute;絕對位置，儘管改為了絕對位置了，但由於其父級是相對定位，所以這裡的絕對位置就變成了相對於父級的絕對，而不是針對瀏覽器進行絕對位置。

3.12.3 何時選用絕對與相對定位

　　絕對與相對定位在實際應用中並不常見，值存在於一些特殊情況下。

　　絕對位置用於網頁設定全部固定，而且不希望採用margin、padding、border等屬性進行控制。一般有下面一些的設計會使用到。

• 不規則網頁設計
• 在畫面上的設計
• 互動式設計