CSS盒子模式(DIV布局快速入門).doc

《CSS盒子模式(DIV布局快速入門).doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

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

2、是CSS排版網(wǎng)頁的優(yōu)勢遠(yuǎn)遠(yuǎn)不只這些，本人在這里就不多說，自己可以去查找相關(guān)信息。理解CSS盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？先說說我們?cè)诰W(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫猓粘Ｉ钪兴姷暮凶右簿哂羞@些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而填充就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至于邊界則說明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空

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

4、頁版面設(shè)計(jì)了，如下圖?，F(xiàn)在對(duì)CSS盒子模式理解多少了，如果還不夠透徹，繼續(xù)往下看，我會(huì)在后面舉例，并延用盒子的概念來解釋它。轉(zhuǎn)變我們的思路傳統(tǒng)的前臺(tái)網(wǎng)頁設(shè)計(jì)是這樣進(jìn)行的：根據(jù)要求，先考慮好主色調(diào)，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件自由的畫出來，最后再切成小圖，再不自由的通過設(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è)

5、計(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)的話，那么改起來就相當(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)分離后，代碼才簡潔，更新才方便，這不正是我們學(xué)習(xí)CSS的目的所在嗎

6、？舉個(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樣式：P{text-indent:2em;}，這樣結(jié)果body內(nèi)容部分就如下，這沒有外加任何表現(xiàn)控制的標(biāo)簽：加進(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樣式里就行了，不用像這樣來寫了：

7、nt?color="#FF0000"?face="宋體">段落內(nèi)容