區塊排版 Box Model

很多使用CSS的人都會抱怨,為什麼IE排版看起來恰到好處,換成其他瀏覽器來看就是慘不忍睹,也有不少人因此把「使用CSS」與「無法跨平台」這兩件事情給劃上等號,唉~可憐CSS,沒事要去替IE擔大便,明明是IE理解能力差勁,反而讓CSS搞到一身臭名。不過最近我再找資料的時候,卻赫然發現,IE居然退讓了!從官方說明以及我實地測試的結果看來,IE6及IE7已經徹底改變了原本錯誤的box model計算方式,改為遵循W3C的box model規範,這可以說是一件可喜可賀的事情,咱們家老弟還笑說難道是因為比爾蓋茲要退休的關係嗎?沒想到IE居然也願意遵照W3C的標準化規範呢!看來我們要慢慢修正對於IE的壞印象囉!XD(不過官方文件上寫說Updated September 2006,已經更新這麼久了?我怎麼都沒有感覺啊?大概是成見太深了~XD)

什麼是Box Model?簡單來講,它跟你的CSS區塊排版大有關係。CSS將HTML當中所有的元素視為一個矩形的區塊,看圖說故事的話,就像是下面這張引用自W3C官網,用以說明Box Model中內容、內距、邊框粗細、以及邊界之間關係的圖片:

本張圖說明了內容、內距、邊框粗細、以及邊界之間的關係(圖片來源:W3C.org) [D]

一般來講,每個區塊當中所包含的東西不外乎就是必要的內容(不管是文字還是圖片),以及其他不必要的內距、邊框粗細、以及邊界這四個區域;這四個區域可以分別設定不同方向(top、bottom、left、right)的值,每個區域(內容、內距、邊框粗細、以及邊界)所圍成的周長就是該區域的邊緣,也就是說,一個完整的區塊,會有四個可供參考的邊緣。

好像繞口令?沒關係,我們一個一個來做說明。

內容 –
內容的寬高,就是你對於該區塊指定的寬高,也就是說,如果對於一個<div>標籤你用CSS指定它width:200px; height:150px,就代表在這個區塊當中的內容區域寬為200px,高為150px,請注意,只有內容區域而已喔!
內距(padding) –
也就是邊框與內容之間的距離,如果你把該區塊的padding設成0,也就是padding:0px,這樣一來,padding的區域就會和內容區域完全一樣。
邊框(border) –
這個,我想是最沒有問題的,就是邊框的寬度,如果沒有邊框,這個區域所包含的範圍當然就和padding所包含的範圍相同
邊界(margin) –
這邊設定的是邊框區域之於外部或是其他HTML區塊元件的距離,不用說,如果是0,自然就和邊框區域相等。

也就是說,在W3C當中所定義的區塊模型簡單來講可以用下圖來表示:

W3C Box Model

不過以前實際在做的話,往往會發現,ㄚ怎麼跟W3C所講的不一樣?其實那是因為舊版的IE在Box Model上面搞自治區,硬是要採用跟人家不一樣的區塊計算方式,所以會讓排版出現跨瀏覽器問題,但正如我所說的,IE6以後的瀏覽器,目前已經修正了這方面的問題,不過在這邊還是簡單說明一下舊版的計算方式標準的計算方式差在哪裡。

W3C的寬高設定是單就內容區塊而定,不包含區塊以外的任何區域;但是早期的IE6以及更早版本的IE瀏覽器的寬高設定卻是包含了padding與邊框(注意,邊界沒有被計算進去喔!),也就是說不管padding和邊框設成多少,它也不會去改變區塊那100px的寬度,而是去壓縮內容部份。不過萬一內容 + padding + 邊框的總和遠超過原有的width尺寸時,早期的IE6以及更早版本的IE瀏覽器,就會把區塊連同區塊外部原本已設定好尺寸的元件異常的撐大,而FF和Opera等其他瀏覽器則是將之溢出,不會莫名奇妙的去改變外部區塊已經設定好的尺寸,不過這個溢出的問題,到IE7的時候就已經被正確的修正,IE6還沒就是了。

可是,在使用W3C標準的區塊計算方法時,其實也會遇到一些討厭的問題:

100%寬度設定問題

假設我們希望區塊能夠在寬度上符合瀏覽器的寬度,而且是剛剛好符合,不會出現水平捲軸,通常我們會使用width:100% 的設定,不過下面這串語法就會出現問題:

body{ margin: 0px}
div{ width: 100%; border: 2px blue solid; padding: 10px; margin: 0px;}

但是你會發現,不管你怎麼用,除非沒有border、沒有padding、也沒有margin,不然不管怎麼弄,就是會出現水平捲軸。基本上,這種寫法,如果是在使用標準box model的瀏覽器上看就會出現問題,不過如果是舊的IE看起來就會很正常。看起來好像W3C這種width只設定內容卻不包含border、padding的Box Model沒有辦法有效的處理這樣的問題,但我認為,這只是人們老是使用過去不標準IE瀏覽器作為自己開發依據的緣故;因為在標準化瀏覽器當中,只要是區塊物件(不限DIV),不去指定寬度值,瀏覽器在讀取的時候就是預設滿版,也就是說,上面這語法如果要滿版,只要把 width:100%; 這項宣告拿掉即可正常呈現,這樣一來,就可以輕輕鬆鬆的達到漂亮的滿版效果。

另外一個方法是比較不建議使用的,那就是在區塊外面放個多餘的div,設定width:100%,然後border、padding、margin都為零,讓裡面的區塊跟著外面的區塊來變動尺寸。不過因為一時想不出恰當的例子,所以總覺得這種作法無法看出明確的必要性,好處是只要外面的尺寸改變,裡面就可以跟著改變,而不需要重新設定,不過前提是你裡面的區塊設計得當。

Anyway,很高興IE在標準化有了大進步,而未來我們也不需要為了寬度這種小問題動用hack,這真是遵循網頁標準化開發人員的一大福音啊!回家來為這件事情放個鞭炮吧~

[NOTE]

有人問,為什麼我的 IE6 的 Box Model 還沒有標準化咧?

如果你發現你的IE6沒有如我所說的符合標準的Box Model規範,請檢查一下你的網頁原始碼,第一行必須要有下列的DTD宣告:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果你沒有,那使用的依然是舊版的Box Model計算方式喔!(千萬不要以為這一行沒有用就給人家亂拿掉,你看,現在果然頭大了吧!)

參考資料:

[MSDN]CSS Enhancements in Internet Explorer 6

[W3C]Box model

Advertisements

3 thoughts on “區塊排版 Box Model

  1. 這一行語法,是XHTML標準的東西。如果要遵循更嚴謹的定義,transitional 要替換成 strict 。不過一般人應該沒有必要用上這一個文件類型定義,因為如果你的HTML不夠標準,你會Debug到頭大….

  2. 要查詢有關div模組的使用方法,點到您的站…
    文章的生活化和舉例範例,讓人容易看得懂也看得下去,
    謝謝您的分享哩!!!

    原本我也從事網頁設計工作,不過有離界一陣子…
    以往都是使用table來做版面,現在目前大家都逐漸採用div標籤方式~

    有什見易的相關書籍呢?或是學習網站~
    還是其他您的文章~

    感溫,(_ _)m

    • 最基礎的部份,其實我還是建議您從HTML開始瞭解,因為標準化的排版技術核心畢竟還是在HTML,因此我推薦您可以先從歐萊禮的HTML&XHTML大全開始看起接著建議您閱讀「Web Standards Solutions網頁設計標準規格」這本書,它可以幫助您瞭解基本的網頁標準規格。

      其他也有許多相當好用關於css排版的書籍,包括「CSS web的設計的關鍵法則」、「CSS網頁設計師手札-101個您一定會遇到的問題與解答」…等等,都是您可以參考的書籍。

      網站的部份,因為我個人最常使用的還是W3C的官方網站,如果未來有看到任何優秀的網站,我也會在這個部落格裡面推薦給大家的!

      希望我給您的資訊有幫助到您~:D

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s