CSS的盒子模型(必知的CSS知識(shí)點(diǎn))

1、一定要接觸到的一個(gè)知識(shí)點(diǎn)就是CSS的盒子模式，這就是DIV排版的核心所在，傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因?yàn)橛眠@種方式排版的網(wǎng)頁代碼簡(jiǎn)潔，更新方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網(wǎng)頁的優(yōu)勢(shì)遠(yuǎn)遠(yuǎn)不只這些，本人在這里就不多說，自己可以去查找相關(guān)信息。理解CSS盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們?cè)诰W(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border

2、)、邊界(margin),CSS盒子模式都具備這些屬性。CSS盒子模式這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?箱子)上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時(shí)也為了方便取出嘛。在網(wǎng)頁設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子(DIV嵌套)，與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過盒子本身最

3、多把它撐大，但它不會(huì)損壞的。填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個(gè)盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實(shí)生活中，假設(shè)我們?cè)谝粋€(gè)廣場(chǎng)上，把不同大小和顏色的盒子，以一定的間隙和順序擺，最后從廣場(chǎng)上空往下看由“盒子”堆出來的網(wǎng)頁版面現(xiàn)在對(duì)CSS盒子模式理解多少了，如果還不夠透徹，繼續(xù)往下看，我會(huì)在后面舉例，并延用盒子的概念來解釋它。轉(zhuǎn)變我們的思路傳統(tǒng)的前臺(tái)網(wǎng)頁設(shè)計(jì)是這樣進(jìn)行的：根據(jù)要求，先考慮好主色調(diào)，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自

4、由的畫出來，最后再切成小圖，再不自由的通過設(shè)計(jì)HTML生成頁面，改用CSS排版后，我們要轉(zhuǎn)變這個(gè)思想，此時(shí)我們主要考慮的是頁面內(nèi)容的語義和結(jié)構(gòu)，因?yàn)橐粋€(gè)強(qiáng)CSS控制的網(wǎng)頁，等做好網(wǎng)頁后，你還可以輕松的調(diào)你想要的網(wǎng)頁風(fēng)格，況且CSS排版的另外一個(gè)目的是讓代碼易讀，區(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排版有一個(gè)很實(shí)用的好處是，如果你是接單做網(wǎng)站的，如果你用了CSS排版網(wǎng)頁，做到后來客戶有什么不滿意，特別是色調(diào)

5、的話，那么改起來就相當(dāng)容易，甚至你還可以定制幾種風(fēng)格的CSS文件供客戶選擇，又或者寫一個(gè)程序?qū)崿F(xiàn)動(dòng)態(tài)調(diào)用，讓網(wǎng)站具有動(dòng)態(tài)改變風(fēng)格的功能。實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離在真正開始布局實(shí)踐之前，再來認(rèn)識(shí)一件事結(jié)構(gòu)和表現(xiàn)相分離，這也用CSS布局的特色所在，結(jié)構(gòu)與表現(xiàn)分離后，代碼才簡(jiǎn)潔，更新才方便，這不正是我們學(xué)習(xí)CSS的目的所在嗎？舉個(gè)例來說P是結(jié)構(gòu)化標(biāo)簽，有P標(biāo)簽的地方表示這是一個(gè)段落區(qū)塊，margin是表現(xiàn)屬性，我要讓一個(gè)段落右縮進(jìn)2字高，有些人會(huì)想到加空格，然后不斷地加空格，但現(xiàn)在可以給P標(biāo)簽指定一個(gè)CSS樣式：Ptext-indent:2em;，這樣結(jié)果body內(nèi)容部分就如下，這沒有外加任何表現(xiàn)控制的標(biāo)

6、簽：加進(jìn)天涯社區(qū)有一段時(shí)間了，但一直沒有時(shí)間寫點(diǎn)東西，今天寫了一篇有關(guān)CSS布局的文章，并力求通過一種通俗的語言來說明知識(shí)點(diǎn)，還配以實(shí)例和圖片，相信對(duì)初學(xué)CSS布局的人會(huì)帶來一定的幫助。如果還要對(duì)這個(gè)段落加上字體、字號(hào)、背景、行距等修飾，直接把對(duì)應(yīng)的CSS加進(jìn)P樣式里就行了，不用像這樣來寫了：fontcolor=#FF0000face=宋體段落內(nèi)容這個(gè)是結(jié)構(gòu)和表現(xiàn)混合一起寫的，如果很多段落有統(tǒng)一結(jié)構(gòu)和表現(xiàn)的話，再這樣累加寫下去代碼就繁冗了。再直接列一段代碼加深理解結(jié)構(gòu)和表現(xiàn)相分離用CSS排版以下是引用片段：不用css排版以下是引用片段：第一種方法是結(jié)構(gòu)表現(xiàn)相分離，內(nèi)容部分代碼簡(jiǎn)單吧，如果還有更

7、多的圖片列表的話，那么第一種CSS布局方法就更有優(yōu)勢(shì)，我打個(gè)比喻你好理解：我在BODY向你介紹一個(gè)人，我只對(duì)你說他是一個(gè)人，至于他是一個(gè)什么樣的人，有多高，是男是女，你去CSS那里查下就知道。這樣我在BODY的工作就簡(jiǎn)單了，也就是說BODY的代碼就簡(jiǎn)單了。如果BODY有一個(gè)團(tuán)隊(duì)人在那里，我在CSS記錄一項(xiàng)就行了，這有點(diǎn)像Flash軟件里的元件和實(shí)例的概念，不同的實(shí)例共享同一個(gè)元件，這樣動(dòng)畫文件就不大了，把這種想法移到CSS網(wǎng)頁設(shè)計(jì)中，就是代碼不復(fù)雜，網(wǎng)頁文件體積小能較快被客戶端下載了。演示地址:/css1.html用CSS排版減小網(wǎng)頁文件體積，像上面我做的那個(gè)版面，一共分為四個(gè)區(qū)塊，每個(gè)區(qū)塊的

8、框架是一樣的，這個(gè)框架就是用CSS寫出來的，樣式寫一次，就可以被無數(shù)次調(diào)用了（用class調(diào)用，而不是ID），只要改變其中的文字內(nèi)容就可以生成風(fēng)格統(tǒng)一的眾多板塊了，它的樣式和結(jié)構(gòu)代碼是（請(qǐng)不要直接復(fù)制生成網(wǎng)頁，把下面代碼分別粘貼到網(wǎng)頁中它們應(yīng)在的位置）：以下是引用片段：前言正文內(nèi)容CSS盒子模式正文內(nèi)容轉(zhuǎn)變思想正文內(nèi)容熟悉步驟正文內(nèi)容熟悉工作流程在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)表現(xiàn)控制標(biāo)簽，如：font、color、height、width、align等標(biāo)簽不能再出現(xiàn)，（簡(jiǎn)單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法

9、），我不是單純的用DIV來實(shí)現(xiàn)排版的嵌套，DIV是塊級(jí)元素，而像P也是塊級(jí)元素，例如要分出幾個(gè)文字內(nèi)容塊，不是一定要用DIV才叫DIV排版，不是“文字塊一文字塊二文字塊2”，而用“文字塊一文字塊二文字塊三”更合適。用DIV+CSS設(shè)計(jì)思路是這樣的：1用div來定義語義結(jié)構(gòu)；2然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對(duì)齊屬性等；3最后在這個(gè)CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標(biāo)簽），下面大家跟我一起來做一個(gè)實(shí)例加深對(duì)這個(gè)步驟的理解。先看結(jié)果圖：峠亞筆US渝盒子稅堂雯対卄剖4它是金子辛芳說佗菽門在險(xiǎn)逸計(jì)牛頁圻腹住呂：刃龍忙mien：城托tpfUdnR、觀（hrrisi.

10、過鼎的和咸.百陽Sfc孑運(yùn)31S1E召曜甘.誼些鼬撕河M把遜朮申的血煮n?I4FF茗生啟中如見輔盅丁也具脊電些性，Mi昭HE盅代衛(wèi)卻&噸$毗盅于蘭菲旳棗勺；向萄兀就毘也主于些芒干ESi貝扭”昨弗毋如的淚沫或吾耳E抗斑咖料；世ItiX題亍本月亍；至于竝界5卿蜓亍搖芯旳時(shí)聞半側(cè)主耳對(duì)在一超査當(dāng)一足三呼諜?BSJS間時(shí)也力了方1恵出臨*工網(wǎng)B展卜二，PlSKiiSST.U櫛怛星出刊戍呂小倚cD咆涪j.與現(xiàn)妄覽中盤子不同的,EJHMzitl1切曹一嵌卜ie丸十立子.把刪e.3唸曄師死比穴匿融三石亜磐勺主卡二把蚯3槎即霽更.fiSSfj百劉引瞼邑二勺”乘:一可u理硏為主潔中膚見土孑站停飆驅(qū)!生子是時(shí)卄邙

11、貯網(wǎng)科藏成旳宀屛at長(zhǎng)肚王與工己衣刼尺皚宙丈毛宮-在加叫送中苦門吒T廣堪上mt瓦劉呦8啟搭于口一走旳酈和J?序蜀IS好很忌山廠商上卑下吾.話世醫(yī)JE和吿?。ㄜ塈d隹誠顧念?yuàn)Y謖計(jì)孫BMC?SiS!SB7.如果忑下哼倉肌聯(lián)康柱下足-覺呂壬屈*叭幷延用呂子的fi.BjfJPfi-B.前希I鈿粘愕|工脳中牡|C口塔書冋購理|二運(yùn)直%頂力t?1006-2006Guchui.AIRijitsPaserteid演示地址： HYPERLINK /css2.htmlCSS /css2.htmlCSS排版結(jié)果圖1.用div來定義語義結(jié)構(gòu)頁頭導(dǎo)航欄5vid=Mnav,內(nèi)容udivid=contenf5te現(xiàn)在我要給

12、大家演示的是一個(gè)典型的版面分欄結(jié)構(gòu)，即頁頭、導(dǎo)航欄、內(nèi)容、版權(quán)（如下圖），典型版面分欄結(jié)構(gòu)其結(jié)構(gòu)代碼如下以下是引用片段：上面我們定義了四個(gè)盒子，按照我們想要的結(jié)果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個(gè)頁面中居中對(duì)齊，為了方便控制，我們?cè)侔堰@四個(gè)盒子裝進(jìn)一個(gè)更大的盒子，這個(gè)盒子就是BODY,這樣代碼就變成：以下是引用片段：最外邊的大盒子（裝著小盒子的大盒子）我們要讓它在頁面居中，并重定義其寬度為760像素，同時(shí)加上邊框，那么它的樣式是：以下是引用片段：bodyfont-family:Arial,Helvetica,sans-serif;font-size:12px;margin

13、:Opxauto;height:auto;width:760px;border:1pxsolid#006633;頁頭為了簡(jiǎn)單起見，我們這里只要讓它整個(gè)區(qū)塊應(yīng)用一幅背景圖就行了,并在其下邊界設(shè)計(jì)定一定間隙，目的是讓頁頭的圖像不要和下面要做的導(dǎo)航欄連在一起，這樣也是為了美觀。其樣式代碼為：以下是引用片段：#headerheight:100px;width:760px;background-image:url(headPic.gif);background-repeat:no-repeat;margin:0px0px3px0px;導(dǎo)航欄我做成像一個(gè)個(gè)小按鈕，鼠標(biāo)移上去會(huì)改變按鈕背景色和字體色，那么這

14、些小小的按鈕我們又可以理解為小盒子，如此一來這是一個(gè)盒子嵌套問題了，樣式代碼如下：以下是引用片段：#navheight:25px;width:760px;font-size:14px;list-style-type:none;#navlifloat:left;#navliacolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color:#009966;margin-left:2px;rbackground-colo

15、r:#006633;color:#FFFFFF;內(nèi)容部分主要放入文章內(nèi)容，有標(biāo)題和段落，標(biāo)題加粗，為了規(guī)范化，我用H標(biāo)簽，段落要自動(dòng)實(shí)現(xiàn)首行縮進(jìn)2個(gè)字,同時(shí)所有內(nèi)容看起來要和外層大盒子邊框有一定距離，這里用填充。內(nèi)容區(qū)塊樣式代碼為：以下是引用片段：#contentheight:auto;width:740px;line-height:1.5em;padding:10px;#contentptext-indent:2em;Ltenth5font-size:16px;margin:10px;版權(quán)欄，給它加個(gè)背景，與頁頭相映，里面文字要自動(dòng)居中對(duì)齊，有多行內(nèi)容時(shí)，行間距合適，這里的鏈接樣式也可以單獨(dú)指定，我這里就不做了。其樣式代碼如下：以下是引用片段：#footerheight:50px;width:740px;line-height:2em;text-align:center;background-color:#009966;padding:10px;最后回到樣式開頭大家會(huì)看到這樣的樣式代碼：以下是引用片段：*margin:0px;padding:0px;這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會(huì)有一定的邊界，如Form標(biāo)簽）那么接下來