徹底弄懂CSS盒子模式之一 - CSS+DIV -

徹底弄懂CSS盒子模式之一

時間:2013-08-13 12:43:43   來源:   評論:加載中...   點擊:加載中...
前言如果你想嘗試一下不用表格來排版網頁,而是用CSS來排版你的網頁,也就是常聽的用DIV來編排你的網頁結構,又或者說你想學習網頁標準設計,再或者說你的上司要你改變傳統的表格排版方式,提高企業競爭力,那么你...

前言

如果你想嘗試一下不用表格來排版網頁,而是用CSS來排版你的網頁,也就是常聽的用DIV來編排你的網頁結構,又或者說你想學習網頁標準設計,再或者說你的上司要你改變傳統的表格排版方式,提高企業競爭力,那么你一定要接觸到的一個知識點就是CSS的盒子模式,這就是DIV排版的核心所在,傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容,改用CSS排版后,就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔,更新方便,能兼容更多的瀏覽器,比如PDA設備也能正常瀏覽,所以放棄自己之前鐘愛的表格排版也是值得的,更重要的是CSS排版網頁的優勢遠遠不只這些,本人在這里就不多說,自己可以去查找相關信息。

理解CSS盒子模型

什么是CSS的盒子模式呢?為什么叫它是盒子?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。


CSS盒子模式

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也具有這些屬性,所以叫它盒子模式。那么內容就是盒子里裝的東西;而填充就是怕盒子里裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料;邊框就是盒子本身了;至于邊界則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出嘛。在網頁設計上,內容常指文字、圖片等元素,但是也可以是小盒子(DIV嵌套),與現實生活中盒子不同的是,現實生活中的東西一般不能大于盒子,否則盒子會被撐壞的,而CSS盒子具有彈性,里面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。在現實生活中,假設我們在一個廣場上,把不同大小和顏色的盒子,以一定的間隙和順序擺放好,最后從廣場上空往下看,看到的圖形和結構就類似我們要做的網頁版面設計了,如下圖。


由“盒子”堆出來的網頁版面

現在對CSS盒子模式理解多少了,如果還不夠透徹,繼續往下看,我會在后面舉例,并延用盒子的概念來解釋它。

轉變我們的思路

傳統的前臺網頁設計是這樣進行的:根據要求,先考慮好主色調,要用什么類型的圖片,用什么字體、顏色等等,然后再用Photoshop這類軟件自由的畫出來,最后再切成小圖,再不自由的通過設計HTML生成頁面,改用CSS排版后,我們要轉變這個思想,此時我們主要考慮的是頁面內容的語義和結構,因為一個強CSS控制的網頁,等做好網頁后,你還可以輕松的調你想要的網頁風格,況且CSS排版的另外一個目的是讓代碼易讀,區塊分明,強化代碼重用,所以結構很重要。如果你想說我的網頁設計的很復雜,到后來能不能實現那樣的效果?我要告訴你的是,如果用CSS實現不了的效果,一般用表格也是很難實現的,因為CSS的控制能力實在是太強大了,順便說一點的是用CSS排版有一個很實用的好處是,如果你是接單做網站的,如果你用了CSS排版網頁,做到后來客戶有什么不滿意,特別是色調的話,那么改起來就相當容易,甚至你還可以定制幾種風格的CSS文件供客戶選擇,又或者寫一個程序實現動態調用,讓網站具有動態改變風格的功能。

實現結構與表現分離

在真正開始布局實踐之前,再來認識一件事——結構和表現相分離,這也用CSS布局的特色所在,結構與表現分離后,代碼才簡潔,更新才方便,這不正是我們學習CSS的目的所在嗎?舉個例來說P是結構化標簽,有P標簽的地方表示這是一個段落區塊,margin是表現屬性,我要讓一個段落右縮進2字高,有些人會想到加空格,然后不斷地加空格,但現在可以給P標簽指定一個CSS樣式:P {text-indent: 2em;},這樣結果body內容部分就如下,這沒有外加任何表現控制的標簽:

<p>加進天涯社區有一段時間了,但一直沒有時間寫點東西,今天寫了一篇有關CSS布局的文章,并力求通過一種通俗的語言來說明知識點,還配以實例和圖片,相信對初學CSS布局的人會帶來一定的幫助。</p>

如果還要對這個段落加上字體、字號、背景、行距等修飾,直接把對應的CSS加進P樣式里就行了,不用像這樣來寫了:

<p><font color="#FF0000" face="宋體">段落內容</font></p>

這個是結構和表現混合一起寫的,如果很多段落有統一結構和表現的話,再這樣累加寫下去代碼就繁冗了。

再直接列一段代碼加深理解結構和表現相分離:

用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" />

第一種方法是結構表現相分離,內容部分代碼簡單吧,如果還有更多的圖片列表的話,那么第一種CSS布局方法就更有優勢,我打個比喻你好理解:我在BODY向你介紹一個人,我只對你說他是一個人,至于他是一個什么樣的人,有多高,是男是女,你去CSS那里查下就知道。這樣我在BODY的工作就簡單了,也就是說BODY的代碼就簡單了。如果BODY有一個團隊人在那里,我在CSS記錄一項就行了,這有點像Flash軟件里的元件和實例的概念,不同的實例共享同一個元件,這樣動畫文件就不大了,把這種想法移到CSS網頁設計中,就是代碼不復雜,網頁文件體積小能較快被客戶端下載了。

演示地址:css1.html
用CSS排版減小網頁文件體積

像上面我做的那個版面,一共分為四個區塊,每個區塊的框架是一樣的,這個框架就是用CSS寫出來的,樣式寫一次,就可以被無數次調用了(用class調用,而不是ID),只要改變其中的文字內容就可以生成風格統一的眾多板塊了,它的樣式和結構代碼是(請不要直接復制生成網頁,把下面代碼分別粘貼到網頁中它們應在的位置):

<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 h3 {
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">
<h3>前言</h3>
<p>正文內容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>轉變思想</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>熟悉步驟</h3>
<p>正文內容 </p>
</div>



相關熱詞搜索:

 
上一篇:網頁設計中針對中文排版CSS心得
下一篇:徹底弄懂CSS盒子模式之二
收藏 將此文推薦給朋友
分享到:
10个数复式三中三多少组公式