資源描述:
《徹底弄懂css盒子模式》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、徹底弄懂CSS盒子模式(DIV布局快速入門)如果你想嘗試一下不用表格來排版網(wǎng)頁,而是用CSS來排版你的網(wǎng)頁,也就是常聽的用DIV來編排你的網(wǎng)頁結(jié)構(gòu),又或者說你想學(xué)習(xí)網(wǎng)頁標(biāo)準(zhǔn)設(shè)計,再或者說你的上司要你改變傳統(tǒng)的表格排版方式,提高企業(yè)競爭力,那么你一定要接觸到的一個知識點(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)信息?!±斫釩SS盒子模型 什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網(wǎng)頁設(shè)計中常聽的屬性名:內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin),CSS盒子模式都具備這些屬性。CSS盒子模式這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘I钪械暮凶樱ㄏ渥樱┥蟻砝斫?,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放
3、的時候的不能全部堆在一起,要留一定空隙保持通風(fēng),同時也為了方便取出嘛。在網(wǎng)頁設(shè)計上,內(nèi)容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現(xiàn)實(shí)生活中盒子不同的是,現(xiàn)實(shí)生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現(xiàn)實(shí)生活中,假設(shè)我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空
4、往下看,看到的圖形和結(jié)構(gòu)就類似我們要做的網(wǎng)頁版面設(shè)計了,如下圖。由“盒子”堆出來的網(wǎng)頁版面 現(xiàn)在對CSS盒子模式理解多少了,如果還不夠透徹,繼續(xù)往下看,我會在后面舉例,并延用盒子的概念來解釋它?!∞D(zhuǎn)變我們的思路 傳統(tǒng)的前臺網(wǎng)頁設(shè)計是這樣進(jìn)行的:根據(jù)要求,先考慮好主色調(diào),要用什么類型的圖片,用什么字體、顏色等等,然后再用Photoshop這類軟件自由的畫出來,最后再切成小圖,再不自由的通過設(shè)計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排版的另
5、外一個目的是讓代碼易讀,區(qū)塊分明,強(qiáng)化代碼重用,所以結(jié)構(gòu)很重要。如果你想說我的網(wǎng)頁設(shè)計的很復(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文件供客戶選擇,又或者寫一個程序?qū)崿F(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)相分離,這也用C
6、SS布局的特色所在,結(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布局的人會帶來一定的幫助。
7、 如果還要對這個段落加上字體、字號、背景、行距等修飾,直接把對應(yīng)的CSS加進(jìn)P樣式里就行了,不用像這樣來寫了:
段落內(nèi)容
這個是結(jié)構(gòu)和表現(xiàn)混合一起寫的,如果很多段落有統(tǒng)一結(jié)構(gòu)和表現(xiàn)的話,再這樣累加寫下去代碼就繁冗了。 再直接列一段代碼加深理解結(jié)構(gòu)和表現(xiàn)相分離: 用CSS排版
| |
|
| |
|
|