由“盒子”堆出來的網頁版面
現在對CSS盒子模式理解多少了，如果還不夠透徹，繼續往下看，我會在後面舉例，並延用盒子的概念來解釋它。
轉變我們的思路
傳統的前台網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什麼類型的圖片，用什麼字型、顏色等等，然後再用Photoshop這類軟體自由的畫出來，最後再切成小圖，再不自由的通過設計HTML產生頁面，改用CSS排版後，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網頁，等做好網頁後，你還可以輕鬆的調你想要的網頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區塊分明，強化代碼重用，所以結構很重要。如果你想說我的網頁設計的很複雜，到後來能不能實現那樣的效果？我要告訴你的是，如果用CSS實現不了的效果，一般用表格也是很難實現的，因為CSS的控制能力實在是太強大了，順便說一點的是用CSS排版有一個很實用的好處是，如果你是接單做網站的，如果你用了CSS排版網頁，做到後來客戶有什麼不滿意，特別是色調的話，那麼改起來就相當容易，甚至你還可以定製幾種風格的CSS檔案供客戶選擇，又或者寫一個程式實現動態調用，讓網站具有動態改變風格的功能。
實現結構與表現分離
在真正開始布局實踐之前，再來認識一件事——結構和表現相分離，這也用CSS布局的特色所在，結構與表現分離後，代碼才簡潔，更新才方便，這不正是我們學習CSS的目的所在嗎？舉個例來說P是結構化標籤，有P標籤的地方表示這是一個段落區塊，margin是表現屬性，我要讓一個段落右縮排2字高，有些人會想到加空格，然後不斷地加空格，但現在可以給P標籤指定一個CSS樣式：P {text-indent: 2em;}，這樣結果body內容部分就如下，這沒有外加任何錶現控制的標籤：
如果還要對這個段落加上字型、字型大小、背景、行距等修飾，直接把對應的CSS加進P樣式裡就行了，不用像這樣來寫了：
<p><font color="#FF0000" face="宋體">段落內容</font></p>
這個是結構和表現混合一起寫的，如果很多段落有統一結構和表現的話，再這樣累加寫下去代碼就繁冗了。
再直接列一段代碼加深理解結構和表現相分離：
用CSS排版
<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <p id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</p>
不用CSS排版
<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" />
第一種方法是結構表現相分離，內容部分代碼簡單吧，如果還有更多的圖片列表的話，那麼第一種CSS布局方法就更有優勢，我打個比喻你好理解：我在BODY向你介紹一個人，我只對你說他是一個人，至於他是一個什麼樣的人，有多高，是男是女，你去CSS那裡查下就知道。這樣我在BODY的工作就簡單了，也就是說BODY的代碼就簡單了。如果BODY有一個團隊人在那裡，我在CSS記錄一項就行了，這有點像Flash軟體裡的元件和執行個體的概念，不同的執行個體共用同一個元件，這樣動畫檔案就不大了，把這種想法移到CSS網頁設計中，就是代碼不複雜，網頁檔案體積小能較快被用戶端下載了。
用CSS排版減小網頁檔案體積
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<p class="mainBox">
<h3>前言</h3>
<p>本文內容</p>
</p>
<p class="mainBox">
<h3>CSS盒子模式</h3>
<p>本文內容 </p>
</p>
<p class="mainBox">
<h3>轉變思想</h3>
<p>本文內容 </p>
</p>
<p class="mainBox">
<h3>熟悉步驟</h3>
<p>本文內容 </p>
</p>
熟悉工作流程
在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什麼我不知道，在內容部分我不能讓它再出現表現控制標籤，如：font、color、height、width、align等標籤不能再出現，（簡單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用p來實現排版的嵌套，p是區塊層級元素，而像P也是區塊層級元素，例如要分出幾個文字內容塊，不是一定要用p才叫p排版，不是“<p>文字塊一</p><p>文字塊二</p><p>文字塊三</p>”，而用“<p>文字塊一</p><p>文字塊二</p><p>文字塊三</p>”更合適。
用p+CSS設計思路是這樣的: 1.用p來定義語義結構；2.然後用CSS來美化網頁，如加入背景、線條邊框、對齊屬性等；3.最後在這個CSS定義的盒子內加上內容，如文字、圖片等（沒有表現屬性的標籤），下面大家跟我一起來做一個執行個體加深對這個步驟的理解。先看結果圖：
示範地址：http://www.php.cn/
CSS排版結果圖
典型版面分欄結構
其結構代碼如下：
複製代碼 代碼如下:
<body>
<p id="header"></p>
<p id="nav"></p>
<p id="content"></p>
<p id="footer"></p>
</body>
最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面置中，並重定義其寬度為760像素，同時加上邊框，那麼它的樣式是：
複製代碼 代碼如下:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
頁頭為了簡單起見，我們這裡只要讓它整個區塊應用一幅背景圖就行了,並在其下邊界設計定一定間隙，目的是讓頁頭的映像不要和下面要做的導覽列連在一起，這樣也是為了美觀。其樣式代碼為：
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
導覽列我做成像一個個小按鈕，滑鼠移上去會改變按鈕背景色和字型色，那麼這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
內容部分主要放入文章內容，有標題和段落，標題加粗，為了正常化，我用H標籤，段落要自動實現首行縮排2個字,同時所有內容看起來要和外層大盒子邊框有一定距離，這裡用填充。內容區塊樣式代碼為：
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
著作權欄，給它加個背景，與頁頭相映，裡面文字要自動置中對齊，有多行內容時，行間距合適，這裡的連結樣式也可以單獨指定，我這裡就不做了。其樣式代碼如下：
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
最後回到樣式開頭大家會看到這樣的樣式代碼：
* {
margin: 0px;
padding: 0px;
}
這是用了萬用字元初始化各標籤邊界和填充，（因為有部分標籤預設會有一定的邊界，如Form標籤）那麼接下來就不用對每個標籤再加以這樣的控制，這可以在一定程度上簡化代碼。最終完成全部樣式代碼是這樣的：
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>
結構代碼是這樣的：
<body>
<p id="header"></p>
<ul id="nav">
<li><a href="#">首 頁</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相簿</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">論 壇</a></li>
<li><a href="#">協助</a></li>
</ul>
<p id="content">
<h3>前言</h3>
<p>第一段內容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段內容</p>
</p>
<p id="footer">
<p>關於華升 | 廣告服務 | 華升招聘 | 客服中心 | Q Q留言 | 網站管理 | 會員登入 | 購物車</p><p>Copyright 2006 - 2008 Tang Guohui. All Rights Reserved</p>
</p>
</body>
好了，此文到此結束，更多內容，如：CSS中的盒子寬度計算，瀏覽器安全色問題，XHTML正常化寫法等請大家去參考其它資料。如果覺得此文還可以，看過之後記得跟帖，你的鼓勵是我不斷出新文章的動力^-^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
