HTML 長成這樣子：

<div class="pagination digg">
<ul>
<li class="disabled">第一頁</li>
<li class="disabled">上一頁</li>
<li class="current">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=2">下一頁</a></li>
<li><a href="?page=5">最後一頁</a></li>
</ul>
</div>

其中 digg 就是可以代換的樣式，可以用的樣式我都整理到一個 CSS 檔了。至於怎麼產生這個 HTML ，就請大家自行發揮所長囉。

以下是每個樣式長的樣子：

• 舊的專案網頁
• 新的專案網頁 (放在 Google Code 裡)

看起來是滿有趣的東西，有空可以試試看。

HedgerWow`s Blog > 100% pure CSS Fix for IE Z-INDEX Bug > <SELECT> Free Layer

主要也是用 iframe 來解決，但是完全不用 JavaScript (裡面的 JavaScript 是用來拖曳圖層的) 。

HedgerWow`s Blog 真是一個很不錯的參考網站，感謝 chihwen 。

用 Firefox 看會有不同的驚喜喔。

利用以下的 CSS 屬性，能讓已經預先格式化的文字在視窗的邊緣換行：

<style type="text/css">
/*<![CDATA[*/
.precode {
  display: block;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: pre-wrap; /* CSS 2.1 */
}

/*]]>*/
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/ 
.precode {
  white-space: pre; /* CSS2 */
  word-wrap: break-word; /* IE */
}
/*]]>*/
</style>

說明如下：

• word-wrap: break-word; - 視窗邊界換行，僅 IE 支援。也可以用 word-brak: break-all; 但不會保持英文單字的完整性。

• white-space: pre; - 對某標籤作預先格式化，所有標準瀏覽器皆支援。

• white-space: -moz-pre-wrap; - 預先格式化，但在元素邊界換行，僅 Mozilla (Firefox) 支援。

• white-space: pre-wrap; - 預先格式化，但在元素邊界換行，僅 Opera 支援。

這次用的方法雖然不標準，且瀏覽器的支援性不足，但至少能讓我們的版型能在多數狀況下能夠順利被呈現。

註：也可以參考這篇：Whitespace and generated content (目前 Firefox 觀看會不正常)。

這個版型唯一的難度在於 content 的寬度比 banner 來的窄，而缺點是小新的頭太大了。

圖是我自己用 Fireworks 畫的，拉到最底下可以看到小新的腳。

而電影常常搞個幕後花絮，那我也來簡單介紹一下我的小新版型是怎麼做的。

首先準備小新的圖，並切成頭、身體背景及腳。

接下來在腦袋裡想像一下網頁的結構：

1. #container 的實際寬度為 760px ，但內容寬度為 600px ，這是為了置放 #content 裡的文字，使它們能夠縮在小新的身體裡。所以我把 #container 左右兩邊的 padding 設為 80px (760px 減掉 600px 再除以 2) 。

2. 因為 #container 的寬度被限制在 600px ，但是 #banner 及 #footer 的實際寬度必須維持在 760px ，所以我把 #banner 和 #footer 設為 position: relative 後，把它們往左拉回 80px ，這樣小新的頭和腳才能與身體對齊。

3. 接下來的 #content 及 #links 部份，其實和兩欄式版型的製作方式雷同。

4. 把架構固定後，接著就把小新的頭、腳及身體當做背景放上去。因為頭和腳的大小剛好固定，所以我就不特意再下什麼語法去調整。但是身體因為是 #container 的背景，所以只能用縱軸重覆，不然會版型的左右兩邊會跑出奇怪的白色區塊。

   不過有個地方很麻煩，那就是樂多在 #footer 後面沒事加了一個 div ，而且沒 id 值。這樣一來我就沒辦法把它藏起來，只好把 body 的底部邊界往上拉。可是 IE 和 Firefox 對這個方式解釋又不同，所以用 IE 看的話，就會發現小新的腳底有個奇怪的白色區塊。當然我是有辦法解決，但就是懶字訣作祟...

5. 最後的裝飾就是苦工了，我是直接拿舊的 site.css 來改的。沒辦法，我這個人對沒什麼意義的事就很懶得去做。

CSS 碼就不貼了，有興趣的朋友用 Firefox 自行找吧。

只要觀念對了， CSS 不會很難的。

補充：樂多目前有三欄版型可供選擇，大家可以直接使用它們或修改它們。這篇文章的目的在於記錄我自己在 CSS 三欄式版面的製作心得，大家參考看看就好囉。

首先，我們準備一個 JavaScript 檔，內容為：

document.write('</div><div id="links2">');

儲存時，命名為 links2.js ，然後將它上傳到樂多的檔案空間，並記下上傳後的 URL。

接著我們到樂多 Blog 的管理介面，新增一個 JavaScript 型態的插入欄位 (Links2)，URL 就把剛剛記下來的 URL 貼上去。

然後我們把新增的這個 JavaScript 的插入欄位順序調整到我們想分離的位置之前，如下圖：

如此一來，從「版權聲明」以下的插入欄位，都會被歸到 #links2 去了。

接下來就是我們的重頭戲 - CSS ：

html, body {
	margin: 0;
	padding: 0;
	font-size: 10pt;
}

#container {
	position: relative;
	left: 50%;
	padding-top: 100px;
	margin-left: -380px;
	width: 760px;
}

#banner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100px;
}

#links {
	position: relative;
	top: 0;
	float: left;
	width: 150px;
	margin-right: -150px;
	background-color: Aqua;
}

#links2 {
	position: absolute;
	width: 150px;
	top: 100px;
	left: 0px;
	background-color: Fuchsia;
}

#content {
	position: relative;
	top: 0;
	padding-left: 150px;
	width: 510px;
	float: left;
	background-color: #FFEBCD;
}

這裡僅大概介紹其設定方式：

1. 將 #container 置中，並在上面留下 100px 的高度。
2. 將 #banner 設為 position: absolute ，並將它的高度設為 100px 且移到 #container 的左上角。
3. 將 #content 和 #links 設為向左浮動，可參考先前的「樂多 Blog 排版入門」。
4. #links2 設為 position: absolute ，然後將它貼在 #container 的左方，從上數下來 100px 的位置。
5. #content 在左方留下 150px 的空間，以容納 #links2 。

剩下就交給有興趣的朋友自行變化囉。

表單的邊界問題

在多數瀏覽器預設的表單樣式，會讓表單上下會有一小塊空間，如下所示：

原始碼如下：

<form name="form1" id="form1" method="post" action="">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

所以一般在設計表單時，都會像上面這樣利用表格來編排輸入欄位，再將 <form> 標籤藏在 <table> 裡，如下：

<table width="400" border="1">
  <form name="form1" id="form1" method="post" action="">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
  </form>
</table>

但是這不符合 W3C 的標準，而且在 Dreamweaver 編輯時，也不容易點選表單。

透過 CSS ，我們能夠很容易地解決這個問題，我們只需設定：

<form name="form1" id="form1" method="post" action="" style="margin: 0;">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

如果要讓整個網站的表單都能依此規則作用，那麼我們僅需在共用的 CSS 檔案裡加入：

form {
  margin: 0;
}

但是除非必要，否則大多數情況還是不建議大家使用表格來編排輸入欄位。

用 CSS 來編排輸入欄位

不過不使用表格的話，怎麼做表單的排版呢？

我們利用 <p> 標籤和 <label> 標籤來完成這項任務，如下所示：

<form name="form1" id="form1" method="post" action="">
<p>
  <label for="text1">文 字 欄 位 1</label>
  <input type="text" name="text1" id="text1" accesskey="1" />
</p>
<p>
  <label for="text2">文字欄位2</label>
  <input type="text" name="text2" id="text2" accesskey="2" />
</p>
<p>
  <label for="text3">多行文字欄位</label>
  <textarea name="text3" id="text3" cols="40" rows="10" accesskey="3"></textarea>
</p>
</form>

實際上的畫面如下圖：

當然這樣標籤並沒有對齊，所以我們透過 CSS 來搞定它。

首先當然是把 <form> 的邊界去除：

form {
  margin: 0;
}

接著，我們讓 <label> 變成浮動，並固定它的寬度為 100px ，當然你可以視你的標籤文字寬度來決定。

form label {
  float: left;
  width: 100px;
}

最後，為了不讓接下來的輸入欄位被上一層的浮動 <label> 影響，我們再設定 <form> 裡的 <p> 標籤：

form p {
  clear: both;
}

這樣一來，就如下圖所示：

是不是很簡單呢？

當然，除了不用表格之外，這樣的表單我還加上點選文字標籤 <label> ，或是利用鍵盤上的 [ALT] 加上數字鍵，就能夠將輸入焦點自動放到對應的 <input> 欄位上。這些都是無障礙網頁規範裡的一小部份，大家可以多多留意喔。

第一步 了解頁面結構

要化粧前，也得先知道自己的臉屬於何種性質；同理我們也得先掌握樂多的 Blog 的頁面結構 (DOM) 。

檢視自己的樂多 Blog 首頁原始碼，你就可以看到以下的結構：

每個色塊都是一個 DIV ，而這裡我直接用 CSS 的表示法來標示 DIV 的 ID 。

再來我們分析 #content 和 #links ，如下圖：

一樣地，我用 CSS 表示法來標示每個區塊的 CLASS 屬性。

#content 就是我們的 Blog 記事區，而 #links 則是功能選單的集合體，這裡我們暫時不對細部的區塊作討論。

第二步 決定版型

沒有適當的動線規劃及版面設計，再豐富的網站內容也是枉然。在決定我們的 Blog 要長什麼樣子之前，應該要思考如何讓瀏覽者能夠方便地操作你所提供的功能。另外，一個好的視覺設計也是必要的，除非你想標新立異，那麼舒服的色系及精緻的版面都是你應該要追求的。

不過這裡我不多談如何設計這些視覺上的效果，畢竟我並非設計系出身；相關的知識可以請教身邊有美術涵養的高手們，他們會給你很好的建議。

這裡我決定實作全版面兩欄式的版型，其中 #container 及 #content 的寬度會隨著瀏覽視窗大小作動態調整，而 #links 則是固定寬度且靠在視窗右邊，如下圖：

至於背景圖的部份，就請大家自行發揮天份製作囉。

第三步 用 CSS 製作初步的畫面

首先，我們要把 body 和 #container 設定好，如下：

html, body {
  margin: 0;
}

#container {
  position: relative;
  width: 100%;
}

首先我們將 html 和 body 的邊界設為 0 ，然後再把 #container 的寬度設為 100% 。

(註：你可以在建構版型時，利用背景色來讓自己知道區塊跑到哪兒去了。)

接下來，我們指定 #banner 的高度：

#banner {
  height: 80px;
}

這裡我假設背景圖的高度是 80px ，當然你可以視需要自行更改。

然後我們利用浮動技巧，將 #content 放到左邊， #links 放到右邊。我們不指定 #content 的寬度，因為它會變動。我們僅需要固定住 #links 的寬度即可 (假設為 200px ) 。

#content {
  float: left;
}

#links {
  float: right;
  width: 200px;
}

咦？為什麼還是沒有效果？ #links 並沒有跑到 #content 的右邊？而是跑到 #content 的右下方去了：

這是因為現在 #content 的內容區寬度是 100% ，所以 #links 被 #content 擠了下來。解決的方式是把 #links 的 margin-left 指定為負值，讓它往左拉回 200px ：

#links {
  float: right;
  width: 200px;
  margin-left: -200px;
}

好啦，現在版面變成這樣：

呃...可是 #content 的內容和 #links 的內容疊在一起了，怎麼辦？很簡單，我們用 padding-right 把 #cotent 的內容往左擠進來：

#content {
  float: left;
  padding-right: 200px;
}

#footer 因為 #content 和 #links 浮動的關係，自動跑到上面來了。我們只要設定：

#footer {
  clear: both;
  height: 40px;
}

雖然 IE 不用設定就會正常 (其實是不正常) ，但是為了其他瀏覽器，一定要設定。

好啦，現在實際上的完整版面會變成這樣了：

#content 的可視寬度其實是和 #container 的內容區寬度一樣為 100%，虛線部份才是 #content 的內容區。

有幾點要注意：

1. #content 的內容寬度不可過長，不然會讓 #links 往下掉。
2. #footer 不一定會在 #content 下方出現，這要看 #content 和 #links 哪個元素較高而定。
3. #banner 、 #content 、 #links 、 #footer 屬於結構元素，所以除非必要，否則它們的 margin 、 padding 都應該要設成 0px ( DIV 預設值) 。
4. 如果要讓 #links 和 #content 左右對調，那麼就把 #content 和 #links 的 float 、 padding 和 margin 中之 left 改成 right ， right 改成 left 。
5. 配合這篇「如何正確實作出固定寬度且置中的版型」，只要更動 body 和 #container 的樣式，你就可以讓這個版型置中囉。

完整的 CSS 如下：

html, body {
  margin: 0;
}

#container {
  position: relative;
  width: 100%;
}

#banner {
  height: 100px;
}

#content {
  float: left;
  padding-right: 200px;
}

#links {
  float: right;
  width: 200px;
  margin-left: -200px;
}

#footer {
  clear: both;
  height: 40px;
}

第四步 裝飾其他部份

當然，上面的步驟只是把主要的版面結構定下來，裡面的彩妝還沒完成。礙於我的藝術涵養，就靠大家自行設計喜歡的樣式囉。不過還是有一些東西分享給大家。

前面我在這篇「拆開你的 CSS 吧！」提到 CSS 維護的觀念，在我們把上面主要的結構定義好後，就可以利用外部的 CSS 檔來裝飾其他部份。例如我們可以建立一個 banner.css ，然後把 #banner 裡相關的 CSS 設定在這裡：

banner.css

h1.blogtitle {
  display: block;
  font-size: 12pt;
  padding-top: 10px;
  padding-left: 20px;
  margin: 0;
}

h1 a {
  color: #669;
  text-decoration: none;
}

然後在 site.css 裡把它給 import 進來，這樣一來只要更換不同的 site.css 或 banner.css ，就能夠隨心所欲地更換樣式或版型。

而細部的部份呢？像是 #content 裡的 .date 和 .blogbody ？一樣的方式，我們建立一個 content.css ，然後在裡面設定 .date 和 .blogbody 的樣式就可以了。

第五步 CSS 放在哪裡？

在第四步時我們建立了一堆 CSS 檔，那麼應該放在哪裡才能讓網頁讀到它們呢？

其實 @import 指令可以接受外部的 url ，因此在你找到空間並上傳這些 CSS 檔案以後，可以在你的 site.css 上方寫這樣的指令：

@import url(http://xxx.xxx.xxx.xxx/xxxx.css);

這樣一來就能讓你的 site.css 引入外部 CSS 樣式了。

補述 (IE 的 Bug)

不知道大家有沒有發現，如果 #links 的內容長於 #content 的內容時，在 IE 上面預覽的話，會發現 #footer 竟然是貼在 #content 的下方，如下圖：

這是 IE 的 Bug ，說實在的，也令人非常討厭。這時上面的 CSS 我們就得做點修正，方法是讓 #content 和 #links 都向左浮動。當然，如果要反過來讓 #links 在 #content 的左方，那麼就把這兩者都向右浮動。這樣一來，在大多數的瀏覽器上都能夠正常顯示了。

補述 (固定寬度置中的版型)

在固定寬度置中的版型裡，我們要額外指定 #content 的寬度，例如：

#content {
  float: left;
  padding-right: 200px;
  width: 560px; /* 760 - 200 = 560 */
}

為什麼呢？因為我發現多數瀏覽器沒辦法很正確判斷出 #content 內容區應有的寬度，因此就得指定 #content 內容區的寬度。至於技術細節，就請知道的網友告知一下吧。

結語

雖然這裡提供的 CSS 並不能真正用在實務上，但是它俱備了多數 CSS 排版的基礎觀念。因此大家只要了解這些原理以後，相信往後一定能創造更優秀的版型來

浮動是設定元素的 float 屬性，我們能設定向左 (left) 或向右 (right) 浮動。浮動基本上會使得元素在有足夠的空間時，往父元素的左邊或右邊靠緊。接著原本跟在這個元素後面的其他元素，就會自動往上跑 (不過這裡會有部份要考量的地方，稍後再談)。當元素被設定浮動時，會自動變成區塊顯示元素 (display: block) ，這時候我們就可以設定元素的 width 和 height 了。

不過要注意一點：當我們把 position 設為 absolute 時，浮動會失效。

浮動會因為元素先後順序而有所影響，例如我們有 A 、 B 兩個區塊顯示元素如下圖，其中虛線部份的內部為父元素的內容區：

如果我們把 A 元素設為向右浮動，那麼 B 元素就會自動往上跑，如下圖：

而把 B 元素向右浮動的話， A 元素並不會受到干擾， B 元素也不會往父元素的上邊靠，如下圖：

那如果不往右浮動，而是向左浮動呢？那就非常複雜了。為什麼呢？因為各家瀏覽器的實作不同！如果我們試著把 A 元素向左浮動，就會發現 IE 會讓 B 元素跑到 A 元素的右邊；可是在 Firefox 和 Opera 上，雖然 A 元素會靠到父元素內容區的左邊，但是則會讓 B 的 Content 區被擠到 A 元素的下方 (詭異的是 B 元素的背景區卻靠向父元素內容區的上方)。所以在排版時，要特別注意這種情況。

如果我們不希望在緊跟在 A 元素及 B 元素後面的元素被浮動所影響，那麼就該對此元素設定 clear: both。

另外元素的 Box Model 也會影響元素的浮動，我在 CSS 排版觀念：Box Model 裡提到了一些要點，這裡再說明一下。

Box Model 正確的寬度，通常就是影響浮動是否能正常的關鍵。如下圖，是我們常見的置中兩欄式 float 排版。Sidebar 往左浮動，Content 則是往右浮動。

在浮動 Sidebar 時，如果沒有考慮好 Content 的 margin 和 padding，或是 Content 裡的內容過長無法折行時，Sidebar 的部份就會整個往下掉，如下圖。

因此在利用浮動製作版面時，一定也要記得和 Box Model 相互搭配，這樣才能夠製作正確而實用的版型。

總而言之，浮動技巧是 CSS 排版中非常重要的一門學問。下次我們就來正式挑戰一些常見的版型，不但告訴你怎麼做，還告訴你為什麼要這樣做。

Box Model 的意思是說，每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成，如下圖 (取自 MSDN)：

所以一般我們指定的 width 和 height 是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。

不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾，但是也不是沒不是沒有辦法解決。Box Model Hack 提供了解決之道，重點在於利用 IE5/5.5 對 CSS 解讀上的 Bug ，讓我們所希望之元素正確的寬高能正確地在 IE5/5.5 顯示出來。

對於 absolute 和 fixed 而言，錯誤的 Box Model 或許影響較小 (不過也絕對不是沒有影響，像是如果要正確控制圖層的寬度時)；但對 relative 和 static 來說，因為它們都還是會保留其所佔有的空間。因此如何正確地調整 content 的大小，就會影響到我們的排版。

以下我們來看看 Box Model 的各個組成分子。

(請特別注意：我在以下圖示中，元素上色的部份，除了有特別說明外，都是包含 border + padding + content ，這點非常重要！因為除了 body 標籤外，元素的 background 屬性的作用都不會包含 margin。)

border

border 是一個「加上去」的屬性，換句話說，一般都是用來區隔元素與元素用的。 border 的外圍即為元素的最外圍，因此計算元素實際的寬高時，就一定要將 border 納入。換句話說， border會佔有空間，所以在計算精細的版面時，一定要將 border 的影響考慮進去。

如下圖，黑色虛線部份即為 border ：

還有一點要特別注意，如果我們在元素上設定背景色時， IE 是作用在 padding + content ，而 Firefox 則是作用在 border + padding + content 上。

padding

padding 會在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓。如下圖：

如果元素的內容中有行內顯示元素時，我們可以利用 padding 的設定來讓它們在我們想要的地方折行，而不用對 content 指定寬度；這樣的技巧我用在全版面的兩欄式版面上，使得我不用對難用的 width 屬性傷腦筋。

其實 padding 就這麼簡單，不過可別小看它，在 CSS 排版裡， padding 加上 margin 的設定，就能夠使版面千變萬化。

margin

margin 的意義就是該元素與其他元素間的邊界距離，它的應用大概也算是 CSS 排版很重要的技術之一。所以我打算多花一點時間解釋它。

我們可以分以下兩種狀況解釋：「元素與相鄰元素的距離」及「元素與父元素間的距離」。

「元素與相鄰元素的距離」指得是元素間是緊鄰的 (不論是區塊顯示元素或行內顯示元素) ，而沒有階層關係。例如：

 <span id="i1>行內顯示元素1</span><span id="i2">行內顯示元素2</span> 

這兩個 span 元素就是緊鄰關係。而 <span> 屬於行內顯示元素(display: inline) ，因此它們的邊界距離就是 i1 的 margin-right 加上 i2 的 margin-left ，如下圖。

另一種緊鄰關係是區塊顯示元素，例如：

<div id="b1">區塊顯示元素1</div><div id="b2">區塊顯示元素2</div>

<div> 屬於區塊顯示元素，也就是在它的前後會加入換行的控制。要注意的是，區塊顯示元素它們的邊界距離是重疊的！而當 b1 的 margin-bottom 大於 b2 的 margin-top 時， b1 和 b2 實際的距離就以 b1 的 margin-bottom 為準，如下圖。

還有一種緊鄰關係是浮動元素，基本上它會是個區塊顯示元素，但 margin 的呈現關係和行內顯示元素是很像的，這我會在介紹浮動元素時再加以說明。

「元素與父元素間的距離」就是指元素之間有階層關係時的邊界距離。例如：

<div id="b3">
  <div id="b4">內部區塊</div>
</div>

其中 b3 就是父元素， b4 則是子元素。 它們的邊界關係如下圖：

我們可以看到，子元素的邊界起始會以父元素的 Content 區為基準。

上面我們都是將 margin 設為正值，例如將元素的 margin-top 設為 20px ，那麼元素上面就會多出 20px 的空間。注意，我是說多出空間，而非向下移動！有什麼差別呢？

向下移動的定義是我們讓元素成為區塊顯示(display: block)或是它原本就是區塊顯示元素，然後指定它的 position 為 relative ，最後設定它的 top 為正值。

而多出空間則不論它的 position 設定為何，硬是擠進我們指定的空間。而且設定 margin 之後，頁面內容超過螢幕顯示範圍，即時有捲軸也無法呈現完整的內容。

不過 IE6 和 FireFox 兩者對 Box Model 在 margin 的實作又有點不太一樣。IE6 就算指定了父元素的 height ，如果子元素的高度超過父元素的 height ，父元素就會被撐大，然後保留子元素 margin-bottom 的空間；而 FireFox 就不會。哪個實作是對的，我也不太清楚。

margin 也可以指定為負值，例如我在這篇「如何正確實作出固定寬度且置中的版型？」裡，運用到了將 margin-left 設定為負值的技巧。這裡我再加以說明，將 margin 設定為負值是怎麼一回事。

在「元素與元素間緊鄰」時，我們將 margin 設定為負值，會使得 margin 設定為負值的元素「疊」到另一個元素上 (不過還是要視另一個元素所設定的邊界距離而定) 。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。

「元素間有階層性關係」時的關係，如果子元素的所指定的 margin 負值的絕對值大於父元素的 border + padding 時，就會使得子元素跑到父元素的外部去了。如圖，我們指定藍色元素的 margin-left 為 -100px ，那麼該元素就會往左跑 100px ；這時如果其父元素 (淺黃色) 的 border-left 和 padding-left 相加小於 100px ，我們就會看到該元素就會突出於父元素的左邊。

總而言之，將 margin 指定為負值在 CSS 排版上有非常大的用處，如果能將它了然於胸，相信你在 CSS 排版的功力一定會大增的。

這篇我僅描述了 CSS Box Model 的一些基本觀念，雖然不是非常深入，但希望能夠讓大家對它們有基本的認知。而 CSS 排版除了 Position 和 Box Model 外，還有一樣非常值得探討的技術，就是浮動 (float) ；我將會在下次的文章中談到它。

不過它們之間到底有什麼不同呢？本文做個簡單的說明。

參數說明

首先我把其中的關係整理成表：

當我們對元素的 position 屬性，指定了 absolute、 relative 或 fixed 後，這個元素就可以移動了。我們可以用 top, left, right, bottom 這四種屬性來指定元素要呈現的位置。

由於 IE 不支援 position: fixed ，使得固定位置這個好用的技巧一直不受大家的重視。但在這裡我還是提一下。你可以使用 FireFox 來感受一下固定位置的強大威力，或是等待新版的 IE 支援。

接下來我們來解釋上面的表列裡，每個參數說明的意義。

畫面位置參考基準

以絕對位置 (position: absolute) 而言，故名思義，它是以父元素的邊界為絕對起點。例如如果我們設定 top: 50px ，那麼這個元素就會在距離父元素內容區上邊界 50px 的地方呈現，如下圖：

補充：如果父元素的 position 不是 absolute 或 relative 時，那麼元素的位置就會再對應到父元素的上層元素；如果其親代元素的 position 都沒有設定 absolute 或 relative 時，就以螢幕視窗最大可視範圍邊界為基準。

而以相關位置 (position: relative) 而言，其意義就是相對於原本的位置。例如我們指定 top: 50px 時，那麼這個元素就會從原本應該呈現的位置往下移動 50px 。如下圖，紅色虛線部份就是未設定 position: relative 前，元素原該應該在的位置：

而固定位置 (position: fixed) 指的就是固定在螢幕視窗最大可視範圍上，如果不指定位置 (top, left, right, bottom) 時，那元素就會固定在原本的位置；而指定位置後，就會以螢幕視窗最大可視範圍的邊界為絕對基準點。如果頁面內容超過螢幕視窗最大可視範圍大小時，那麼不論我們如何捲動頁面，元素都會固定在螢幕視窗最大可視範圍上我們所指定的位置。

移動參考基準

當頁面可以捲動的時候，absolute 、 relative 、 static 都會跟著移動。只有 fixed 會固定在螢幕視窗最大可視範圍上，不會跟著移動。

可改變顯示位置

就是我們可以透過指定元素的 top, left, right, bottom 四個屬性，使元素改變顯示位置。如果元素是 position: static 時，會自動忽略所設定的 top, left, right, bottom 。

可調整大小

我們可以透過 width, height 來調整元素內容區的大小，不過當 position 是 relative 或是 static 時，元素的 display 屬性必須為 block 才可調整其大小。

從顯示流程中去除

顯示流程的意義就是頁面上的每一個元素的呈現，換句話說，就是該元素會出現的位置，及其佔用的空間等等。

我們可以將原來的頁面想成是一個圖層，每個元素都是一個一個緊接在前一個元素後面。如下圖，在尚未指定 position 時，粉紫色區塊會緊接在淺藍色區塊後。

請注意，我在這裡提到的圖層，指的是瀏覽器去解譯 HTML 後，將元素呈現出來的圖層，而非一般我們所認為，以絕對位置呈現的圖層；你可以把它想像成是 Photoshop 裡的圖層。

當我們指定淺藍色區塊的 position 屬性為 absolute 或 fixed 後，淺藍色區塊就會跑到另一個圖層；而粉紫色區塊因為淺藍色區塊已經從原圖層的顯示流程中去除了，所以它就自動往上跑。如下圖，紅色虛線就是粉紫色區塊原本的位置。

而元素如果指定為 relative 時，雖然也能移動，但原本的頁面圖層還是會保留該元素所佔有的空間。

後記

或許你在看完這篇文章之後，還是無法很清楚地了解 position 屬性的運作方式。建議你打開你的瀏覽器 (最好是用 FireFox)，再用你慣用的 HTML 編輯器去試試它們之間的差異。然後回來看看這篇文章，你也許就能明白我的意思。

補充：如果頁面在框架裡時 (frame 或 iframe) ，所有參照螢幕視窗最大可視範圍邊界的元素就會改為參照框架邊界。

範例

以下這個範例，你可以看到設定 position 前及設定 position 後的關係：

id 則是元素唯一的名稱，就像每個人的身份證號碼一樣不能有重覆 (雖然大多數瀏覽器允許) ，這樣我們才能透過標準的 JavaScript (ECMAScript) 及 DOM 來取得這個元素。例如：<div id="container"> ，意思就是整個頁面裡只會有一個名為 container 的主要 div 容器。

而 class 和 id 的命名儘可能反應這些元素所代表的意義，而非以它們會呈現的樣式來命名。例如說 class="blogbody" 比 class="bgBlue" 來得好，因為我們可能會更換樣式。如果以樣式呈現的方式命名，那麼一旦更換樣式，且呈現方式變化過大的話，這樣的名稱就相當難以維護了。

你也有同感嗎？教你一個好方法，適用於目前主流的瀏覽器上，像是 IE 及 FireFox。

CSS 只能寫在一個檔案裡嗎？非也。在 CSS 裡有個好用的指令：@import ，可以讓我們引入外部 CSS 檔案。

你只要在主要的 CSS 檔案的最上方這樣寫：

@import url(外部 CSS 檔案路徑);

就可以了。不過一定要注意，@import 指令一定要寫在 body 標籤的 CSS 設定之前。

然後我們應該如何正確地拆開 CSS 呢？雖然 CSS 沒有強制性地規定我們如何拆解 CSS ，不過我倒是可以提供一些建議。

1. 主要的檔案只放置編排版面的 CSS ，而字型、背景等等的設定儘可能地放到其他檔案裡。
2. 每個主要區塊的 CSS 都將它存成一個檔案，而檔案裡面就可以放這些區塊的細部設定。
3. 檔案的命名請用英文字母、數字及底線組成，且儘可能地能夠望而生義。
4. 如果有多種版型，則可再利用 (Reuse) 的部份可以獨立成一個檔案。
5. 不同的媒體 (例如供印表用的 CSS 、螢幕顯示用的 CSS ) ，都應該建立一個檔案，以便管理。

完整範例如下：

@import url(banner.css);
@import url(content.css);
@import url(links.css);
@import url(common.css);
/* 其他的 CSS 檔 */

html, body {
/* ... */
}

/* 其他的設定 */

是的，馬上就去試試看吧。

傳統的作法，都是用表格排版來解決這種問題。但是表格畢竟不是用來排版的，而且一但使用表格排版，頁面的版型就定死了，毫無靈活度可言；因此我將把表格排版這項解決方案丟到垃圾筒，改以 CSS 作為我排版的利器。

調整 HTML

如何用 CSS 正確實作出固定寬度且置中的版型呢？我們有兩種方式可以達到這樣的目的。不過在此之前，我們必須先將所有的網頁內容用一個 <div> 標籤包起來，就像下面這樣：

<html>
<head>[略]</head>
<body>
<div id="container">
[網頁內容]
</div>
</body>
</html>

我們指定這個 <div> 標籤的 id 屬性為 container ， id 屬性在整個頁面裡必須是唯一的。雖然大部份瀏覽器不限制頁面裡的標籤可以擁有重覆的 id 屬性，但我不建議這麼做，因為透過 JavaScript (ECMA Script) 的 document.getElementById 抓取標籤元素時，重覆的 id 屬性會造成混亂。

第一種方法

第一種方式純粹使用 CSS 屬性來控制版面置中，請看下面的 CSS ：

html, body {
  margin: 0;
  text-align: center;
}
#container {
  position: relative;
  margin: 0 auto;
  width: 760px;
  text-align: left;
}

我們一行一行解釋：

html, body - 這行表示我們對 <html> 及 <body> 標籤做樣式設定。大部份瀏覽器的頁面內容都是以 <body> 為基準，但某些瀏覽器則是以 <html> 為基準，所以我兩個都指定。

margin: 0; - 一般我們都會在 <body> 加上 topmargin="0" 及 leftmargin="0" ，使得頁面內容和瀏覽器邊緣間沒有空隙。但是 topmargin 和 leftmargin 屬性都已被 W3C 廢棄了，所以我改用 CSS 的 margin 屬性來指定。

text-align: center; - 重點之一，有些瀏覽器無法很正確地使版型置中，透過這個屬性，我們可以使 <body> 內的所有內容置中。注意，我說的是所有內容，包含所有的標籤、文字、圖片等，所以等會我們必須把它調整回來。

#container - 這行表示我們將會一個 id 屬性值為 container 的標籤做設定。也可以這樣寫： div#container ，如此就很明確地指定是一個 id 屬性值為 container 的 <div> 標籤。

position: relative; - 將元素指定為相對定位。其實這行有沒有並無太大關係，但為了相容性，我還是指定了這個屬性。絕對定位和相對定位的差別我以後有空再說明。

margin: 0 auto; - 重點之二，這會使得 div#container 這個元素與 <bod> 標籤的上下邊界空間設為 0 ，而左右兩邊則自動調整。完整的寫法是 margin: 0 auto 0 auto; ，不過如果有重覆的設定時， CSS 可以讓我們只寫一次，因此 0 auto 0 auto 就可以等於 0 auto 。

width: 760px; - 這就是我們所要指定的版面寬度囉。

text-align: left; - 重點之三，因為我們在 <body> 標籤中指定所有內容置中，而這個設定讓我們把 <div> 標籤裡的所有內容又回到靠左對齊的狀態。

註：這種方法在 Dreamweaver 裡能夠正常顯示，但是下面的第二種方法就不行了。

第二種方法

第二種方式採用位移來控制版本的置中，它的 CSS 如下：

html, body { margin: 0; }
#container {
  position: relative;
  left: 50%;
  margin-left: -380px;
  width: 760px;
}

這個方式也可以達到同樣的效果，我們挑重點解釋：

html, body { margin: 0; } - 我們在這裡拿掉了 text-align: center ，因為第二種方式沒有用到自動調整邊界。另外 CSS 可以讓我們把多個屬性設定值寫在一行裡，但是如果屬性值太多的話，建議你還是拆開成多行，比較容易維護。

#container - 我們拿掉了margin: 0 auto; 及 text-align: left; 。因為第二種方式是以位置的移動來達到置中的目的，所以我們加入了 left: 50%; 及 margin-left: -380px; 。注意我們保留了 position: relative; ，這樣 left 屬性才會有作用。

left: 50%; - 將 div#container 的左邊的相對位置，置於畫面的中央。圖 1 是原本 div#container 應該在的位置，當我們設定 left: 50% 後，就會像圖 2 一樣了。

margin-left: -380px; - 這個設定比較難解釋，簡單說就是把整個元素的左邊界往回拉 380px (記得負值就是往回拉的意思) 。如圖三所示，我們可以看到整個版面置中了。

註：第二種方法在瀏覽器可視範圍比頁面寬度還小時，在 div#container 的左邊部分就會被遮住了，所以使用上要特別小心。

OK ，這兩種方式就能夠使版面置中。而且因為我們將所有頁面內容包在 div#container 元素裡，所以在它裡面的所有元素，其絕對位置都會以 div#container 為基準。因此以後如果有下拉式選單的話，也不用擔心它會跑位囉。

例如我們有以下的程式碼：

<script type="text/JavaScript"><!--
var iCount = 0;
function changeText(objElement) {
     var oTextCount = document.getElementById("txtCount");
     var oCount = document.getElementById("hdnCount");
     iCount = objElement.value.length;
     oTextCount.innerHTML = "" + iCount;
     oCount.value = parseInt(iCount);
}
//--></script>

為了符合文意，我們利用標準的 <code> 標籤將它圍繞起來：

<pre><code>
[程式碼放這裡]
</code></pre>

可是這樣還是沒辦法使程式碼排列整齊，因為空白會被忽略掉。可是如果用 <pre> 標籤，就會使得文件結構變得複雜許多；而且 <pre> 標籤也不符合我們的文意 (註) ，透過 pre 標籤，已經可以呈現程式碼效果，但是看起來很醜；因此我們就要借重 CSS 來幫我們呈現程式碼的效果，讓它更漂亮一些。

註：我後來發現光用 code 標籤圍繞的話，在複製程式碼貼到別的地方時 (例如記事本) ，整個程式會變成一行。所以後來我只好把所有 code 標籤外面，再包一層 pre 標籤。

先看看這個 CSS 的樣子：

code {
display:block;
overflow:auto;
font-family:"Courier New";
white-space:pre;
background:#F0F0F0 url(images/CodeBlock.png) repeat-y scroll left top;
border:1px solid #CCC;
margin:5px 15px 0;
padding:5px 5px 5px 20px;
line-height:1.2em;
max-height:180px;
width:90%;
}

我們一行一行來解釋：

display:block; - 這樣會使得 <code> 標籤內的內容成為一個方形的區塊。你可以去掉它後，看看會變成什麼樣子。

overflow:auto; - 有時候程式碼會超過我們指定的寬度，當 overflow 設定 auto 時， <code> 區塊就會出現捲軸，以便顯示過長的文字內容。需要注意的是，這項屬性必須配合 width 屬性，才能在大部份的瀏覽器上正常顯示。

font-family:"Courier New"; - 設定文字字型，這裡我是用等寬字。

white-space: pre; - 讓 <code> 標籤模擬出 <pre> 標籤的效果，如果用了 pre 標籤的話就可以不用它了。

background:#F0F0F0 url(images/CodeBlock.png) repeat-y scroll left top; - 設定銀色的背景，並在左方加入一個 code 條狀圖 (下載) 。

border:1px solid #CCC; - 設定 <code> 標籤的邊框。

margin:5px 15px 0; - 設定程式區塊與其他元素間的距離 (這裡即為 pre 標籤) 。

padding:5px 5px 5px 20px; - 設定程式碼與邊框間的距離，左方特地加大以容納背景圖。

line-height:1.2em; - 設定程式碼行高，這樣看起來會舒服一點。

max-height:180px; - 設定程式區塊的最大高度，以避免程式區塊讓頁面過長；不過 IE 6 下沒有作用。

width:90%; - 重要設定。沒有它的話，如果你的程式碼文字過長，MSIE 就會爆掉了。

當然這種技巧不一定只能用在顯示程式碼上，像是無框架 (no frameset) 頁面的選單、固定頁尾的頁面，都會用到這種技巧 (不過有時還得再搭配其他小技巧，有機會再談) 。

補充： (感謝「傻RD」網友的提問)

在 <code> 及 </code> 之間的東西要先做處理。
- 「&」(AND符號) 換成 '&amp;'
- 「"」(雙引號) 換成 '&quot;'
- 「'」 (單引號) 換成 '&#039;'
- 「<」 (小於符號) 換成 '&lt;'
- 「>」 (大於符號) 換成 '&gt;'

如果有 Dreamweaver 的話，可以將程式先貼到 Dreamweaver 的設計檢視上 (就是所見即所得) ， Dreamweaver 會幫我們轉換好。然後再切換到程式碼檢視，把已經轉好的原始碼複製下來即可。

如果沒有 Dreamweaver ，就用上面的轉換規則轉換也是可以的。

a {
    position: relative;
    /* 如果連結是在 td 內的話，則要再加入底下這個設定 */
    display: block;
}

如果兩種樣式是一樣的時候，不用寫兩次；利用逗號將兩者分開即可。 如果想要讓 link 和 visited 樣式一樣的話，也最好一起指定。

a:link, a:visited {
    display: block;
    font-size: 12px;
    text-decoration: none;
    color: #495F6E;
    background: #F2F3F4;
    font-family: "Arial";
    padding: 3px;
    margin: 0;
}

連結樣式指定的順序必須為 link -> visited -> hover -> active 。而 hover 和 active 會繼承 link 和 visited 的設定值，所以如果要變動的話，僅需更改想變動的屬性即可。

a:hover {
    color: #FFFFFF; /* 變更文字顏色 */
    background: #990000; /* 變更背景顏色 */
    text-decoration: underline; /* 變更文字樣式 */
}