CSS盒子模式DIV布局快速入門

1、CSS盒子模式(DIV布局快速入門)前言 如果你想嘗試一下不用表格來排版網(wǎng)頁，而是用CSS來排版你的網(wǎng)頁，也就是常聽的用DIV來編排你的網(wǎng)頁結構，又或者說你想學習網(wǎng)頁標準設計，再或者說你的上司要你改變傳統(tǒng)的表格排版方式，提高企業(yè)競爭力，那么你一定要接觸到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因為用這種方式排版的網(wǎng)頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是

2、CSS排版網(wǎng)頁的優(yōu)勢遠遠不只這些，本人在這里就不多說，自己可以去查找相關信息。理解CSS盒子模型 什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們在網(wǎng)頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙

3、保持通風，同時也為了方便取出嘛。在網(wǎng)頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同的是，現(xiàn)實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最后從廣場上空往下看，看到的圖形和結構就類似我們要做的網(wǎng)頁版面

4、設計了，如下圖。現(xiàn)在對CSS盒子模式理解多少了，如果還不夠透徹，繼續(xù)往下看，我會在后面舉例，并延用盒子的概念來解釋它。轉變我們的思路 傳統(tǒng)的前臺網(wǎng)頁設計是這樣進行的：根據(jù)要求，先考慮好主色調，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自由的畫出來，最后再切成小圖，再不自由的通過設計HTML生成頁面，改用CSS排版后，我們要轉變這個思想，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網(wǎng)頁，等做好網(wǎng)頁后，你還可以輕松的調你想要的網(wǎng)頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區(qū)塊分明，強化代碼重用，所以結構很重要。如果你想說我的網(wǎng)頁設計的很復

5、雜，到后來能不能實現(xiàn)那樣的效果？我要告訴你的是，如果用CSS實現(xiàn)不了的效果，一般用表格也是很難實現(xiàn)的，因為CSS的控制能力實在是太強大了，順便說一點的是用CSS排版有一個很實用的好處是，如果你是接單做網(wǎng)站的，如果你用了CSS排版網(wǎng)頁，做到后來客戶有什么不滿意，特別是色調的話，那么改起來就相當容易，甚至你還可以定制幾種風格的CSS文件供客戶選擇，又或者寫一個程序實現(xiàn)動態(tài)調用，讓網(wǎng)站具有動態(tài)改變風格的功能。實現(xiàn)結構與表現(xiàn)分離 在真正開始布局實踐之前，再來認識一件事結構和表現(xiàn)相分離，這也用CSS布局的特色所在，結構與表現(xiàn)分離后，代碼才簡潔，更新才方便，這不正是我們學習CSS的目的所在嗎？舉個例來說P

6、是結構化標簽，有P標簽的地方表示這是一個段落區(qū)塊，margin是表現(xiàn)屬性，我要讓一個段落右縮進2字高，有些人會想到加空格，然后不斷地加空格，但現(xiàn)在可以給P標簽指定一個CSS樣式：P text-indent: 2em;，這樣結果body內容部分就如下，這沒有外加任何表現(xiàn)控制的標簽：加進天涯社區(qū)有一段時間了，但一直沒有時間寫點東西，今天寫了一篇有關CSS布局的文章，并力求通過一種通俗的語言來說明知識點，還配以實例和圖片，相信對初學CSS布局的人會帶來一定的幫助。如果還要對這個段落加上字體、字號、背景、行距等修飾，直接把對應的CSS加進P樣式里就行了，不用像這樣來寫了：< p > <

7、; font color="#FF0000" face="宋體">段落內容</font></p>這個是結構和表現(xiàn)混合一起寫的，如果很多段落有統(tǒng)一結構和表現(xiàn)的話，再這樣累加寫下去代碼就繁冗了。再直接列一段代碼加深理解結構和表現(xiàn)相分離：用CSS排版  <style type="text/css"><!-#photoList imgheight:80;width:100;margin:5px auto;-></style> &

8、lt;div id="photoList">    <img src="01.jpg" />    <img src="02.jpg" />    <img src="03.jpg" />    <img src="04.

9、jpg" />    <img src="05.jpg" /></div>不用CSS排版 < img src="01.jpg" width="100" height="80" align="middle" /><img src="02.jpg" width="100&qu

10、ot; height="80" align="middle" /><img src="03.jpg" width="100" height="80" align="middle" /><img src="04.jpg" width="100" height="80" alig

11、n="middle" /><img src="05.jpg" width="100" height="80" align="middle" />第一種方法是結構表現(xiàn)相分離，內容部分代碼簡單吧，如果還有更多的圖片列表的話，那么第一種CSS布局方法就更有優(yōu)勢，我打個比喻你好理解：我在BODY向你介紹一個人，我只對你說他是一個人，至于他是一個什么樣的人，有多高，是男是女，你去CSS那里查下就知道。這樣我在BODY的工作就簡單

12、了，也就是說BODY的代碼就簡單了。如果BODY有一個團隊人在那里，我在CSS記錄一項就行了，這有點像Flash軟件里的元件和實例的概念，不同的實例共享同一個元件，這樣動畫文件就不大了，把這種想法移到CSS網(wǎng)頁設計中，就是代碼不復雜，網(wǎng)頁文件體積小能較快被客戶端下載了。用CSS排版減小網(wǎng)頁文件體積 像上面我做的那個版面，一共分為四個區(qū)塊，每個區(qū)塊的框架是一樣的，這個框架就是用CSS寫出來的，樣式寫一次，就可以被無數(shù)次調用了(用class調用，而不是ID)，只要改變其中的文字內容就可以生成風格統(tǒng)一的眾多板塊了，它的樣式和結構代碼是（請不要直接復制生成網(wǎng)頁，把下面代碼分別粘貼到網(wǎng)頁中它們應在的位置

13、）：< style type="text/css"><!-* margin:0px; padding:0px;body     font-size: 12px;     margin: 0px auto;    height: auto;    width: 805px;.mainBox     border: 1px dashed #0099CC;

14、    margin: 3px;    padding: 0px;    float: left;    height: 300px;    width: 192px;.mainBox h3     float: left;    height: 20px;    width:

15、179px;    color: #FFFFFF;    padding: 6px 3px 3px 10px;    background-color: #0099CC;    font-size: 16px;.mainBox p     line-height: 1.5em;    text-indent: 2em;   &#

16、160;margin: 35px 5px 5px 5px;-></style><div class="mainBox">    <h3>前言</h3>    <p>正文內容</p></div><div class="mainBox">    <h3>CSS盒子模式</h3> 

17、0;  <p>正文內容 </p></div><div class="mainBox">    <h3>轉變思想</h3>    <p>正文內容 </p></div><div class="mainBox">    <h3>熟悉步驟</h3> &#

18、160;  <p>正文內容 </p></div> 熟悉工作流程 在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內容部分我不能讓它再出現(xiàn)表現(xiàn)控制標簽，如：font、color、height、width、align等標簽不能再出現(xiàn)，（簡單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用DIV來實現(xiàn)排版的嵌套，DIV是塊級元素，而像P也是塊級元素，例如要分出幾個文字內容塊，不是一定要用DIV才叫DIV排版，不是“ 文字塊一文字塊二文字塊三”，而用“ 文字塊一文字塊二文字塊三”更合適。用DIV+

19、CSS設計思路是這樣的: 1.用div來定義語義結構；2.然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等；3.最后在這個CSS定義的盒子內加上內容，如文字、圖片等（沒有表現(xiàn)屬性的標簽），下面大家跟我一起來做一個實例加深對這個步驟的理解。先看結果圖：用div來定義語義結構 現(xiàn)在我要給大家演示的是一個典型的版面分欄結構，即頁頭、導航欄、內容、版權（如下圖）其結構代碼如下：< div id="header"></div><div id="nav"></div><div 

20、;id="content"></div><div id="footer"></div>上面我們定義了四個盒子，按照我們想要的結果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個頁面中居中對齊，為了方便控制，我們再把這四個盒子裝進一個更大的盒子，這個盒子就是BODY，這樣代碼就變成:< body >     <div id="header"></div>   &#

21、160;<div id="nav"></div>    <div id="content"></div>    <div id="footer"></div></body>最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時加上邊框，那么它的樣式是：body font-family: Arial, Helv

22、etica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;頁頭為了簡單起見，我們這里只要讓它整個區(qū)塊應用一幅背景圖就行了,并在其下邊界設計定一定間隙，目的是讓頁頭的圖像不要和下面要做的導航欄連在一起，這樣也是為了美觀。其樣式代碼為：#header height: 100px;width: 760px;background-image: url(headPic.gif);background-repeat: no-repeat;margin:0px

23、0px 3px 0px;導航欄我做成像一個個小按鈕，鼠標移上去會改變按鈕背景色和字體色，那么這些小小的按鈕我們又可以理解為小盒子，如此一來這是一個盒子嵌套問題了，樣式代碼如下： #nav height: 25px;width: 760px;font-size: 14px;list-style-type: none;#nav li float:left;#nav li acolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:

24、center;background-color: #009966;margin-left:2px;#nav li a:hoverbackground-color:#006633;color:#FFFFFF;內容部分主要放入文章內容，有標題和段落，標題加粗，為了規(guī)范化，我用H標簽，段落要自動實現(xiàn)首行縮進2個字,同時所有內容看起來要和外層大盒子邊框有一定距離，這里用填充。內容區(qū)塊樣式代碼為： #content height:auto;width: 740px;line-height: 1.5em;padding: 10px;#content p text-indent

25、: 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;這是用了通配符初始化各標簽邊界和

26、填充，（因為有部分標簽默認會有一定的邊界，如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 he

27、ight: 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 acolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;tex

28、t-align:center;background-color: #009966;margin-left:2px;#nav li a:hoverbackground-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;te

29、xt-align: center;background-color: #009966;padding: 10px;-></style>結構代碼是這樣的：<body>    <div id="header"></div>    <ul id="nav">        <li><a hr

30、ef="#">首 頁</a></li>        <li><a href="#">文 章</a></li>        <li><a href="#">相冊</a></li>        <li><a href="#">Blog</a></li>