| 導購 | 订阅 | 在线投稿
分享
 
 
 

根本不存在DIV+CSS布局這回事

2008-08-16 07:22:35  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

原文:http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html

在《欲練 CSS ,必先宮 IE》和《你有 <table /> 強迫症嗎?》這兩篇文章中,看到有不少評論用到div+CSS布局這個說法,用來和table布局比較。實際上div不是用來布局的,div只是用來表示一個其它元素都無法准確表達語意的一個塊區,只有CSS是用于布局的,所以根本就不存在div+CSS布局這回事。反過來,table布局的時候經常依賴于CSS定義一個單元格的布局屬性,所以可以說是table+CSS布局。也就是說,我們討論的兩種主流布局方法應該是純CSS布局和table+CSS布局,如果你覺得你在用的是div+CSS布局,那麽有可能你也有強迫症了。

接下來我們說說如何進行純CSS布局,因爲CSS布局依賴于XHTML,所以我們先要說說如何書寫一個CSS無關的XHTML。其實書寫CSS無關的XHTML並不難,雖然你不能再好像書寫table布局代碼那樣集中精力于最重的視覺效果上,但其難度也不過是中學生寫作文那樣。

中學生寫作文如何寫呢?首先看看題目,然後想想整篇文章分爲哪幾個大的段落,每個大的段落說些什麽,能夠把你要說的東西說清楚。對于XHTML來說,這相當于用div把文檔切割爲幾大塊。這時候你不要想著這些div將構建一個怎樣的DOM啊、CSS如何選擇DOM中元素設置規則實現布局之類的事情,就大概劃分一下文檔的大區域就好了。

然後當然是用一些常用的手法來表現感情或者論證問題,這在XHTML中就是用特定的元素來完成一些常見的信息組織。下面就是信息組織形式與元素的對應列表。

img

作爲內容的圖片是一定要放到img裏面的,這沒有更好的選擇了。然而如果圖片不是作爲內容,而是作爲修飾性的,則千萬不要用img。對于非內容的圖片,應該在CSS中引用,而不在XHTML中出現。例如每一個導航鏈接有一個前導的箭頭指示,那麽這些箭頭就應該通過CSS的background-image屬性加上去,而不是直接作爲img出現。

a

這也是一個非常准確定義的元素,鏈接都需要使用它。或許已經有很多人忘記了a的本意是錨點,其實這是一個十分有用的語義,你可以用它來標記文檔中一些重要的引用位置。

ul, ol

ul和ol分別是什麽意思呢?如果你回答不上來,卻知道它們可以用來幹什麽,那證明你是被可視化工具寵壞了,要轉換過來編寫符合語義的XHTML需要先補充基礎知識,這時候你最好先找一些看起來非常基礎非常全面的XHTML書籍看看,因爲沒有紮實的基礎你在上面構建更多的知識都是不牢固的。ul和ol其實分別代表unordered list和ordered list,也就是無序列表和有序列表。在語義上,它們都用于表示一類並列關系的內容,例如我們去商店購物之前列一張shopping list,上面要買的東西就是並列關系,在中文可以用頓號隔開那種。它們的差別在于是否有順序,例如shopping list是沒順序的,先買什麽後買什麽是沒關系的,但是一份旅遊行程安排上面的景點列表卻是有遊覽的先後順序的。

ul常用于導航欄,因爲導航元素符合上面所說的並列關系,樹狀導航結構還可以通過嵌套ul來表述。在這裏,導航可以是我們常見的水平或豎直導航欄,甚至可以是地圖導航,例如在中國地圖上不同的省份熱區其實是不同的li。如果我說,在主流浏覽器上用戶看到了中國地圖和可以直接點擊省份熱區,在不支持CSS的浏覽器上用戶能看到一份純文本的省份名稱列表,使用的是同一份XHTML,而這完全通過CSS實現,甚至不依賴于JavaScript,你相信嗎?

另外,如果你要顯示一個圖庫的縮略圖,這些圖片也可以放在ul中哦,因爲這些圖片也是並列關系。它們可以自動先橫排,排滿一行就自動排第二行,CSS可以讓他們乖乖排隊,而不需好像table那樣把圖片定死在一個格子裏。其實table用于布局就如同用監獄關押內容一樣,把內容鎖死在一個格子裏不讓它到處亂跑;符合語義的XHTML就如同一個開放的舞台,你只要懂得利用CSS的規則,內容就自然會找一個適合表現自己的地方站著。

dl

沒有聽說過dl嗎?因爲那些可視化工具生成的代碼中從來不會出現dl?dl的意思是definition list,也就是定義列表。它包含的子元素不是li,而是dt和dd,也就是definition term和definition description。dl本身設計爲字典單詞與解釋列表這樣的語義,例如:

<dl>

<dt>Apple</dt>

<dd>蘋果</dd>

<dt>Boy</dt>

<dd>男孩</dd>

</dl>

然而,如果你需要表示的的語義也是類似的,一個列表既包含定義也包含解釋,那麽也可以考慮用dl。

form, input

form也就是表單啦,這沒什麽好說的,就算再不顧及語義的人在書寫XHTML時也會考慮到它與各種input對提交數據的影響,從而小心謹慎。

table

table自然是用來表示表格的,這不廢話!如果是數據表,當然可以用table來表示,但如果不是,就最好別用table了。

人名列表呢?例如一個3行4列的人名列表。如果這12個人名是並列關系,我建議你用ul和12個li來表示,再通過CSS來讓它們在一行內並列顯示多個。名片表呢?也就是3行8列,每兩列中左側一列顯示人名右側一列顯示電話地址等聯系方式。我覺得dl在一定程度上能滿足此需求,dt放人名,dd放聯系方式,不過這時候就涉及了dl濫用的爭論,因爲人名與聯系方式當作定義與解釋有點牽強。

接下來還有一個關于你是否系統學習過XHTML的小提問,那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary屬性分別用于定義什麽,還有就是你書寫table時是否會使用thead、tbody。

div, span

再次審閱上面的列表,如果你需要表示一個塊區卻無法在上面找到更適合的元素,那麽你就可以考慮使用div和span這兩個最沒有語義的元素了。div與span的區別,曆史上的不說了,現在通常大塊的區域用div,行內的小文本片段就用span。在上面我已經說了div一般用于全局劃分爲幾個大的區域,所以一般不需要使用了。span其實也很少使用,因爲行內的強調通常可以用語義更強的元素例如strong和em。

在理解上上述那麽多常用元素後,寫一個XHTML就真的如同中學生寫作文一樣容易啦,還是搭積木那樣,其實和以前使用可使化工具搭積木沒什麽不同,唯一不同是現在你理解了你在搭的是什麽,而以前你只在乎搭出你想要的視覺效果來。寫代碼與寫作文所類似的地方,就在于你寫得越多就越熟練,也就越能寫出好東西來。在寫好XHTML後我們就要開始考慮如何寫CSS了,或許還需要在XHTML中略作修改以方便CSS中規則的選擇與匹配,不過這是以後再說的內容了,今天就說到這裏。

原文:[url=http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html]http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html[/url] 在《欲練 CSS ,必先宮 IE》和《你有 <table /> 強迫症嗎?》這兩篇文章中,看到有不少評論用到div+CSS布局這個說法,用來和table布局比較。實際上div不是用來布局的,div只是用來表示一個其它元素都無法准確表達語意的一個塊區,只有CSS是用于布局的,所以根本就不存在div+CSS布局這回事。反過來,table布局的時候經常依賴于CSS定義一個單元格的布局屬性,所以可以說是table+CSS布局。也就是說,我們討論的兩種主流布局方法應該是純CSS布局和table+CSS布局,如果你覺得你在用的是div+CSS布局,那麽有可能你也有強迫症了。 接下來我們說說如何進行純CSS布局,因爲CSS布局依賴于XHTML,所以我們先要說說如何書寫一個CSS無關的XHTML。其實書寫CSS無關的XHTML並不難,雖然你不能再好像書寫table布局代碼那樣集中精力于最重的視覺效果上,但其難度也不過是中學生寫作文那樣。 中學生寫作文如何寫呢?首先看看題目,然後想想整篇文章分爲哪幾個大的段落,每個大的段落說些什麽,能夠把你要說的東西說清楚。對于XHTML來說,這相當于用div把文檔切割爲幾大塊。這時候你不要想著這些div將構建一個怎樣的DOM啊、CSS如何選擇DOM中元素設置規則實現布局之類的事情,就大概劃分一下文檔的大區域就好了。 然後當然是用一些常用的手法來表現感情或者論證問題,這在XHTML中就是用特定的元素來完成一些常見的信息組織。下面就是信息組織形式與元素的對應列表。 img 作爲內容的圖片是一定要放到img裏面的,這沒有更好的選擇了。然而如果圖片不是作爲內容,而是作爲修飾性的,則千萬不要用img。對于非內容的圖片,應該在CSS中引用,而不在XHTML中出現。例如每一個導航鏈接有一個前導的箭頭指示,那麽這些箭頭就應該通過CSS的background-image屬性加上去,而不是直接作爲img出現。 a 這也是一個非常准確定義的元素,鏈接都需要使用它。或許已經有很多人忘記了a的本意是錨點,其實這是一個十分有用的語義,你可以用它來標記文檔中一些重要的引用位置。 ul, ol ul和ol分別是什麽意思呢?如果你回答不上來,卻知道它們可以用來幹什麽,那證明你是被可視化工具寵壞了,要轉換過來編寫符合語義的XHTML需要先補充基礎知識,這時候你最好先找一些看起來非常基礎非常全面的XHTML書籍看看,因爲沒有紮實的基礎你在上面構建更多的知識都是不牢固的。ul和ol其實分別代表unordered list和ordered list,也就是無序列表和有序列表。在語義上,它們都用于表示一類並列關系的內容,例如我們去商店購物之前列一張shopping list,上面要買的東西就是並列關系,在中文可以用頓號隔開那種。它們的差別在于是否有順序,例如shopping list是沒順序的,先買什麽後買什麽是沒關系的,但是一份旅遊行程安排上面的景點列表卻是有遊覽的先後順序的。 ul常用于導航欄,因爲導航元素符合上面所說的並列關系,樹狀導航結構還可以通過嵌套ul來表述。在這裏,導航可以是我們常見的水平或豎直導航欄,甚至可以是地圖導航,例如在中國地圖上不同的省份熱區其實是不同的li。如果我說,在主流浏覽器上用戶看到了中國地圖和可以直接點擊省份熱區,在不支持CSS的浏覽器上用戶能看到一份純文本的省份名稱列表,使用的是同一份XHTML,而這完全通過CSS實現,甚至不依賴于JavaScript,你相信嗎? 另外,如果你要顯示一個圖庫的縮略圖,這些圖片也可以放在ul中哦,因爲這些圖片也是並列關系。它們可以自動先橫排,排滿一行就自動排第二行,CSS可以讓他們乖乖排隊,而不需好像table那樣把圖片定死在一個格子裏。其實table用于布局就如同用監獄關押內容一樣,把內容鎖死在一個格子裏不讓它到處亂跑;符合語義的XHTML就如同一個開放的舞台,你只要懂得利用CSS的規則,內容就自然會找一個適合表現自己的地方站著。 dl 沒有聽說過dl嗎?因爲那些可視化工具生成的代碼中從來不會出現dl?dl的意思是definition list,也就是定義列表。它包含的子元素不是li,而是dt和dd,也就是definition term和definition description。dl本身設計爲字典單詞與解釋列表這樣的語義,例如: <dl> <dt>Apple</dt> <dd>蘋果</dd> <dt>Boy</dt> <dd>男孩</dd> </dl> 然而,如果你需要表示的的語義也是類似的,一個列表既包含定義也包含解釋,那麽也可以考慮用dl。 form, input form也就是表單啦,這沒什麽好說的,就算再不顧及語義的人在書寫XHTML時也會考慮到它與各種input對提交數據的影響,從而小心謹慎。 table table自然是用來表示表格的,這不廢話!如果是數據表,當然可以用table來表示,但如果不是,就最好別用table了。 人名列表呢?例如一個3行4列的人名列表。如果這12個人名是並列關系,我建議你用ul和12個li來表示,再通過CSS來讓它們在一行內並列顯示多個。名片表呢?也就是3行8列,每兩列中左側一列顯示人名右側一列顯示電話地址等聯系方式。我覺得dl在一定程度上能滿足此需求,dt放人名,dd放聯系方式,不過這時候就涉及了dl濫用的爭論,因爲人名與聯系方式當作定義與解釋有點牽強。 接下來還有一個關于你是否系統學習過XHTML的小提問,那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary屬性分別用于定義什麽,還有就是你書寫table時是否會使用thead、tbody。 div, span 再次審閱上面的列表,如果你需要表示一個塊區卻無法在上面找到更適合的元素,那麽你就可以考慮使用div和span這兩個最沒有語義的元素了。div與span的區別,曆史上的不說了,現在通常大塊的區域用div,行內的小文本片段就用span。在上面我已經說了div一般用于全局劃分爲幾個大的區域,所以一般不需要使用了。span其實也很少使用,因爲行內的強調通常可以用語義更強的元素例如strong和em。 在理解上上述那麽多常用元素後,寫一個XHTML就真的如同中學生寫作文一樣容易啦,還是搭積木那樣,其實和以前使用可使化工具搭積木沒什麽不同,唯一不同是現在你理解了你在搭的是什麽,而以前你只在乎搭出你想要的視覺效果來。寫代碼與寫作文所類似的地方,就在于你寫得越多就越熟練,也就越能寫出好東西來。在寫好XHTML後我們就要開始考慮如何寫CSS了,或許還需要在XHTML中略作修改以方便CSS中規則的選擇與匹配,不過這是以後再說的內容了,今天就說到這裏。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有