理解CSS盒子模型
什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
CSS盒子模式 這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫猓粘Ｉ钪兴姷暮凶右簿哂羞@些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時也為了方便取出嘛。在網(wǎng)頁設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實(shí)生活中，假設(shè)我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結(jié)構(gòu)就類似我們要做的網(wǎng)頁版面設(shè)計(jì)了，如下圖。
由“盒子”堆出來的網(wǎng)頁版面
現(xiàn)在對CSS盒子模式理解多少了，如果還不夠透徹，繼續(xù)往下看，我會在后面舉例，并延用盒子的概念來解釋它。
轉(zhuǎn)變我們的思路
傳統(tǒng)的前臺網(wǎng)頁設(shè)計(jì)是這樣進(jìn)行的：根據(jù)要求，先考慮好主色調(diào)，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自由的畫出來，最后再切成小圖，再不自由的通過設(shè)計(jì)HTML生成頁面，改用CSS排版后，我們要轉(zhuǎn)變這個思想，此時我們主要考慮的是頁面內(nèi)容的語義和結(jié)構(gòu)，因?yàn)橐粋€強(qiáng)CSS控制的網(wǎng)頁，等做好網(wǎng)頁后，你還可以輕松的調(diào)你想要的網(wǎng)頁風(fēng)格，況且CSS排版的另外一個目的是讓代碼易讀，區(qū)塊分明，強(qiáng)化代碼重用，所以結(jié)構(gòu)很重要。如果你想說我的網(wǎng)頁設(shè)計(jì)的很復(fù)雜，到后來能不能實(shí)現(xiàn)那樣的效果？我要告訴你的是，如果用CSS實(shí)現(xiàn)不了的效果，一般用表格也是很難實(shí)現(xiàn)的，因?yàn)镃SS的控制能力實(shí)在是太強(qiáng)大了，順便說一點(diǎn)的是用CSS排版有一個很實(shí)用的好處是，如果你是接單做網(wǎng)站的，如果你用了CSS排版網(wǎng)頁，做到后來客戶有什么不滿意，特別是色調(diào)的話，那么改起來就相當(dāng)容易，甚至你還可以定制幾種風(fēng)格的CSS文件供客戶選擇，又或者寫一個程序實(shí)現(xiàn)動態(tài)調(diào)用，讓網(wǎng)站具有動態(tài)改變風(fēng)格的功能。
實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離
在真正開始布局實(shí)踐之前，再來認(rèn)識一件事——結(jié)構(gòu)和表現(xiàn)相分離，這也用CSS布局的特色所在，結(jié)構(gòu)與表現(xiàn)分離后，代碼才簡潔，更新才方便，這不正是我們學(xué)習(xí)CSS的目的所在嗎？舉個例來說P是結(jié)構(gòu)化標(biāo)簽，有P標(biāo)簽的地方表示這是一個段落區(qū)塊，margin是表現(xiàn)屬性，我要讓一個段落右縮進(jìn)2字高，有些人會想到加空格，然后不斷地加空格，但現(xiàn)在可以給P標(biāo)簽指定一個CSS樣式：P {text-indent: 2em;}，這樣結(jié)果body內(nèi)容部分就如下，這沒有外加任何表現(xiàn)控制的標(biāo)簽：
加進(jìn)天涯社區(qū)有一段時間了，但一直沒有時間寫點(diǎn)東西，今天寫了一篇有關(guān)CSS布局的文章，并力求通過一種通俗的語言來說明知識點(diǎn)，還配以實(shí)例和圖片，相信對初學(xué)CSS布局的人會帶來一定的幫助。
如果還要對這個段落加上字體、字號、背景、行距等修飾，直接把對應(yīng)的CSS加進(jìn)P樣式里就行了，不用像這樣來寫了：
<p><font color="#FF0000" face="宋體">段落內(nèi)容</font></p>
這個是結(jié)構(gòu)和表現(xiàn)混合一起寫的，如果很多段落有統(tǒng)一結(jié)構(gòu)和表現(xiàn)的話，再這樣累加寫下去代碼就繁冗了。
再直接列一段代碼加深理解結(jié)構(gòu)和表現(xiàn)相分離：
用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> |
不用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"?/> |
第一種方法是結(jié)構(gòu)表現(xiàn)相分離，內(nèi)容部分代碼簡單吧，如果還有更多的圖片列表的話，那么第一種CSS布局方法就更有優(yōu)勢，我打個比喻你好理解：我在BODY向你介紹一個人，我只對你說他是一個人，至于他是一個什么樣的人，有多高，是男是女，你去CSS那里查下就知道。這樣我在BODY的工作就簡單了，也就是說BODY的代碼就簡單了。如果BODY有一個團(tuán)隊(duì)人在那里，我在CSS記錄一項(xiàng)就行了，這有點(diǎn)像Flash軟件里的元件和實(shí)例的概念，不同的實(shí)例共享同一個元件，這樣動畫文件就不大了，把這種想法移到CSS網(wǎng)頁設(shè)計(jì)中，就是代碼不復(fù)雜，網(wǎng)頁文件體積小能較快被客戶端下載了。演示地址：http://www.hsptc.com/css1.html用CSS排版減小網(wǎng)頁文件體積
像上面我做的那個版面，一共分為四個區(qū)塊，每個區(qū)塊的框架是一樣的，這個框架就是用CSS寫出來的，樣式寫一次，就可以被無數(shù)次調(diào)用了(用class調(diào)用，而不是ID)，只要改變其中的文字內(nèi)容就可以生成風(fēng)格統(tǒng)一的眾多板塊了，它的樣式和結(jié)構(gòu)代碼是（請不要直接復(fù)制生成網(wǎng)頁，把下面代碼分別粘貼到網(wǎng)頁中它們應(yīng)在的位置）：
以下是引用片段：
<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>正文內(nèi)容</p>
</div>
<div?class="mainBox">
<h5>CSS盒子模式</h5>
<p>正文內(nèi)容?</p>
</div>
<div?class="mainBox">
<h5>轉(zhuǎn)變思想</h5>
<p>正文內(nèi)容?</p>
</div>
<div?class="mainBox">
<h5>熟悉步驟</h5>
<p>正文內(nèi)容?</p>
</div> |
熟悉工作流程
在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)表現(xiàn)控制標(biāo)簽，如：font、color、height、width、align等標(biāo)簽不能再出現(xiàn)，（簡單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用DIV來實(shí)現(xiàn)排版的嵌套，DIV是塊級元素，而像P也是塊級元素，例如要分出幾個文字內(nèi)容塊，不是一定要用DIV才叫DIV排版，不是“<div>文字塊一</div><div>文字塊二</div><div>文字塊三</div>”，而用“<p>文字塊一</p><p>文字塊二</p><p>文字塊三</p>”更合適。
用DIV+CSS設(shè)計(jì)思路是這樣的: 1.用div來定義語義結(jié)構(gòu)；2.然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等；3.最后在這個CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來做一個實(shí)例加深對這個步驟的理解。先看結(jié)果圖：
演示地址：http://www.hsptc.com/css2.htmlCSS排版結(jié)果圖
- 用div來定義語義結(jié)構(gòu)
現(xiàn)在我要給大家演示的是一個典型的版面分欄結(jié)構(gòu)，即頁頭、導(dǎo)航欄、內(nèi)容、版權(quán)（如下圖），典型版面分欄結(jié)構(gòu)其結(jié)構(gòu)代碼如下：
以下是引用片段：
<div?id="header"></div>
<div?id="nav"></div>
<div?id="content"></div>
<div?id="footer"></div> |
上面我們定義了四個盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個頁面中居中對齊，為了方便控制，我們再把這四個盒子裝進(jìn)一個更大的盒子，這個盒子就是BODY，這樣代碼就變成:
以下是引用片段：
<body>
<div?id="header"></div>
<div?id="nav"></div>
<div?id="content"></div>
<div?id="footer"></div>
</body> |
最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那么它的樣式是：
以下是引用片段：
body?{
font-family:?Arial,?Helvetica,?sans-serif;
font-size:?12px;
margin:?0px?auto;
height:?auto;
width:?760px;
border:?1px?solid?#006633;
} |
頁頭為了簡單起見，我們這里只要讓它整個區(qū)塊應(yīng)用一幅背景圖就行了,并在其下邊界設(shè)計(jì)定一定間隙，目的是讓頁頭的圖像不要和下面要做的導(dǎo)航欄連在一起，這樣也是為了美觀。其樣式代碼為：
以下是引用片段：
#header?{
height:?100px;
width:?760px;
background-image:?url(headPic.gif);
background-repeat:?no-repeat;
margin:0px?0px?3px?0px;
} |
導(dǎo)航欄我做成像一個個小按鈕，鼠標(biāo)移上去會改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下：
以下是引用片段：
#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;
} |
內(nèi)容部分主要放入文章內(nèi)容，有標(biāo)題和段落，標(biāo)題加粗，為了規(guī)范化，我用H標(biāo)簽，段落要自動實(shí)現(xiàn)首行縮進(jìn)2個字,同時所有內(nèi)容看起來要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：
以下是引用片段：
#content?{
height:auto;
width:?740px;
line-height:?1.5em;
padding:?10px;
}
#content?p?{
text-indent:?2em;
}
#content?h5?{
font-size:?16px;
margin:?10px; |
版權(quán)欄，給它加個背景，與頁頭相映，里面文字要自動居中對齊，有多行內(nèi)容時，行間距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：
以下是引用片段：
#footer?{
height:?50px;
width:?740px;
line-height:?2em;
text-align:?center;
background-color:?#009966;
padding:?10px;
} |
最后回到樣式開頭大家會看到這樣的樣式代碼：
以下是引用片段：
*?{
margin:?0px;
padding:?0px;
} |
這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會有一定的邊界，如Form標(biāo)簽）那么接下來就不用對每個標(biāo)簽再加以這樣的控制，這可以在一定程度上簡化代碼。最終完成全部樣式代碼是這樣的：
以下是引用片段：
<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> |
結(jié)構(gòu)代碼是這樣的：
以下是引用片段：
<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>第一段內(nèi)容</p>
<h5>理解CSS盒子模式</h5>
<p>第二段內(nèi)容</p>
</div>
<div?id="footer">
<p>關(guān)于華升?|?廣告服務(wù)?|?華升招聘?|?客服中心?|?Q?Q留言?|?網(wǎng)站管理?|?會員登錄?|?購物車</p><p>Copyright??2006?-?2008?Tang?Guohui.?All?Rights?Reserved</p>
</div>
</body> |
好了，此文到此結(jié)束，更多內(nèi)容，如：CSS中的盒子寬度計(jì)算，瀏覽器兼容問題，XHTML規(guī)范化寫法等請大家去參考其它資料。如果覺得此文還可以，看過之后記得跟帖，你的鼓勵是我不斷出新文章的動力^-^
?