SpringSide 實戰（三）：深入淺出 CSS 盒模型與頁面佈局核心

這篇文章雖不專講 SpringSide，卻是每位 Web 開發者必讀的 CSS 進階指南。還記得早年「表格套表格」的佈局噩夢嗎？頁面稍微一改版就全亂，與美工協作更是寸步難行。如今 CSS 大行其道，我們早該讓 <table> 回歸本職——顯示表格數據。

網路上雖有不少 div + CSS 教學，但常見三大弊病：一、佈局模型講解不清，讓相對定位、浮動等概念難懂；二、避開表格巢狀卻陷入「div 套 div」泥潭，標籤濫用嚴重；三、class 名稱氾濫，維護成本高漲。要寫出優雅 CSS，必須吃透核心模型。本文將從四大基石切入，並以 xkland 專案實戰演示。

一、CSS 盒模型：佈局的基石

瀏覽器將 HTML 標籤歸為兩類：塊級元素（如 div、p、ul）獨占一行；行內元素（如 a、span）則在文字行中流動。我們聚焦塊級元素的盒模型：

每個塊級元素由四層組成：content（內容區）、padding（內邊距）、border（邊框）、margin（外邊距）。我們常說的寬高僅指 content 區域。透過 CSS 精確控制這四層及背景，即可實現靈活的視覺效果。

二、文檔流模型：預設的排列邏輯

塊級元素在 HTML 中按出現順序自上而下排列，各自另起一行（巢狀關係除外）。例如三個 div 依序排列，配合統一的寬高、邊框、外邊距，即呈現垂直堆疊效果。

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

#div1, #div2, #div3 {
  border: 1px solid #000099;
  height: 60px;
  width: 200px;
  margin: 2px;
}

三、定位模型：相對 vs 絕對

定位屬性可打破文檔流限制。相對定位以元素原位置為基準偏移，但原空間仍保留（俗稱「站著茅坑不拉屎」）。若將 div2 右移至 div1 右側，div1 與 div3 間仍存留空白。

#div2 {
  position: relative;
  top: -64px;
  left: 204px;
}

絕對定位則脫離文檔流，不佔空間。同樣將 div2 放至 div1 右側，此時 div1 與 div3 緊貼無縫隙。但動態內容導致高度不定時，絕對定位難以維護，慎用。

四、浮動與清除：多欄佈局的關鍵

float 讓塊級元素脫離文檔流，向左或向右緊貼，形成多欄效果。但浮動元素不佔文檔流空間，導致父容器高度塌陷，子元素「跑」到父元素外部。

解決方案：在浮動元素後添加 clear 元素（如空 <p class="clear"></p>），強制父容器撐開高度。

.clear { clear: left; }

實戰：xkland 首頁佈局重構

以 welcome.jsp 為例，完全摒棄表格佈局，僅頂部 header 內部使用三個 div 承載 Logo、廣告、附錄，其餘區塊（選單、登入、分類、搜尋、最新主題、回覆、熱門統計、群組、用戶、頁腳）皆為同層級 div，順應文檔流自然堆疊，極大減少巢狀深度。

<body>
  <div id="header">...</div>
  <ul id="menu">...</ul>  <!-- 選單用列表語義化 -->
  <div id="loginView">...</div>
  <div id="catalog">...</div>
  ...
  <div id="footer">...</div>
</body>

選單實現：語義化 + 後代選擇器

選單採用 <ul><li> 結構，利用 float: left 使項目水平排列。#menu li 以右邊框模擬分隔線，最後一項透過 .lastMenuItem 移除邊框，避免多餘 class 污染 HTML。

#menu {
  border: 1px solid #0F54C3;
  padding: 5px; margin: 1px 0;
  width: 804px; height: 12px; /* 固定高度防止浮動溢出 */
}
#menu li {
  float: left;
  padding: 0 10px;
  border-right: 1px solid #0F54C3;
}
#menu .lastMenuItem { border-right: none; }

內容區塊：靈活的文檔流佈局

除 #newTopics 以絕對定位置於右側主內容區，其餘區塊皆順應文檔流，僅設寬度無需定位。美工後期調整樣式（如更換 Logo 背景圖）只需修改 CSS，HTML 結構完全不動。

#logo {
  float: left;
  width: 200px; height: 60px;
  background: url(../images/xkland_logo.gif) no-repeat left top;
}

登入區塊：語義化標籤替代無意義 div

登入表單使用 <h3> 做標題、<p> 包裹輸入欄、<ul><li> 排列「忘記密碼」「註冊」「記住我」選項，配合 float 實現兩欄對齊，結構清晰、無冗餘標籤。

<div id="loginView">
  <h3>用戶登錄</h3>
  <form>...</form>
</div>

總結

「結構與表現分離」是鐵律。程序員專注輸出正確數據與語義化 HTML，美工專注 CSS 視覺呈現，雙方透過 ID/Class 這些「錨點」高效協作。若公司附近有大學，舉辦 CSS 設計大賽更能以低成本獲取海量優質介面——何樂而不為？