DIV布局快速入門 徹底弄懂CSS盒子模式http://www.sina.com.cn 2007年03月19日 08:54 天極yesky 作者： 唐國輝 出處： 天極yesky 如果你想嘗試一下不用表格來排版網頁，而是用CSS來排版你的網頁，也就是常聽的用DIV來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的表格排版方式，提高企業競爭力，那麼你一定要接触到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網頁的優勢遠遠不只這些，本人在這里就不多說，自己可以去搜尋相關資訊。 理解CSS盒子模型 什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。CSS盒子模式 CSS盒子模式 這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損坏而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐坏的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損坏的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。
由“盒子”堆出來的網頁版面 現在對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布局的文章，並力求通過一種通俗的語言來說明知識點，還配以實例和圖片，相信對初學CSS布局的人會帶來一定的幫助。 如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了： <p><font color="#FF0000" face="宋体">段落内容</font></p> 这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。 再直接列一段代码加深理解结构和表现相分离：
用CSS排版
<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>
<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写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：
<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 h5 {
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>
<div class="mainBox">
<h5>前言</h5>
<p>正文内容</p>
</div>
<div class="mainBox">
<h5>CSS盒子模式</h5>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h5>转变思想</h5>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h5>熟悉步骤</h5>
<p>正文内容 </p>
</div>
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：
网页样式
演示地址：http://www.hsptc.com/css2.htmlCSS排版结果图
用div来定义语义结构 现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下：
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
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 h5 {
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;
}
<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 h5 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>
<body>
<div id="header"></div>
<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>
<div id="content">
<h5>前言</h5>
<p>第一段内容</p>
<h5>理解CSS盒子模式</h5>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
基本架構 
我的紀錄 (4)