《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的任何特徵。

　　要記住一點，div是一個block對象——塊對象（或者塊級元素）。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	html主體區域
div	區塊定義標籤
span	行間區塊定義標籤

Meta信息	簡述
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標籤對象，但並不是全部對象都會常用到。

3.2 一列固定寬度

　　使用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代碼以下：

 1 [css]
 2 
 3 html, body {
 4     margin: 0px;
 5     height: 100%;
 6 }
 7 
 8 #left {
 9     background-color: #cccccc;
10     width: 300px;
11     height: 100%;
12     float: left;
13 }

　　如上述代碼，對#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所形成的外邊距將出現疊加。好比：

 1 [css]
 2 
 3 #a {
 4     width: 100px;
 5     height: 100px;
 6     background-color: #eeeeee;
 7     border: 5px solid #bbbbbb;
 8     margin: 10px;
 9 }
10 
11 #b {
12     width: 100px;
13     height: 100px;
14     border: 5px solid #bbbbbb;
15     background-color: #999999;
16     margin: 10px;
17 }

　　也許會認爲，因爲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代碼以下：

 1 [css]
 2  
 3  #a, #b, #c, #d {
 4      background-color: #000FFF;
 5      border: 2px solid #00FFFF;
 6      width: 100px;
 7      height: 100px;
 8      margin: 2px 2px 2px 0px;
 9      float: left;
10  }
11  
12  #b {
13      position: absolute;
14      top: 80px;
15      left: 100px;
16  }
17  
18  #d {
19      position: absolute;
20      top:80px;
21      left: 210px;
22  }

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

　　深度(z-index)

　　因爲b和d元素的位置由自身的邊距而決定，所以會出現一個問題，即元素的重疊。這種狀況下，能夠經過設置對象的z-index屬性，以設置其重疊的前後順序，也就是z軸的順序。CSS代碼以下：

[css]

#b {
    position: absolute;
    top: 80px;
    left: 100px;
    z-index: 1;
}

#d {
    position: absolute;
    top: 70px;
    left: 160px;
    z-index: 0;
}

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

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

3.12.2 相對定位

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

　　不佔位的相對定位

　　當對象採用position: relative;時，該對象雖然進行了相對定位，但其原始的佔位信息還存在於文檔流及浮動對象中。要想作到絕對定位那樣，徹底獨立於其餘對象，自身又能夠作到相對定位，能夠經過一組定位組合。XHTML代碼以下：

1 <div id="divGroup">
2     <div id="a">a</div>
3 　 <div id="b">b</div>
4 　 <div id="c">c</div>
5 　 <div id="d">d</div>
6 </div>

　　CSS代碼以下：

 1 [css]
 2 
 3 #divGroup {
 4     margin: 50px 0 0 50px;　
 5 　  position: relative;
 6 　  border: 1px solid #000000;
 7 　  width: 400px;
 8 　  height: 200px;
 9 }
10 
11 #a, #b, #c, #d {
12     background-color: #eeeeee;
13     border: 2px solid #aaaaaa;
14     width: 100px;
15     height: 100px;
16     margin: 2px 2px 2px 0px;
17     float: left;
18 }
19 
20 #b {
21     position: absolute;
22     left: 10px;
23     top: 30px;
24 }

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

3.12.3 什麼時候選用絕對與相對定位

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

　　絕對定位用於網頁設置所有固定，並且不但願採用margin、padding、border等屬性進行控制。通常有下面一些的設計會使用到。

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