<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" 
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>CSS 排版觀念：Box Model</title>
<link>http://blog.roodo.com/jaceju/archives/100724.html/</link>
<description><![CDATA[CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。
Box Model 的意思是說，每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。一個 Box 的實際寬度 (高度) 是由  padding + border + width (height) 所組成，如下圖 (取自 MSDN)： 所以一般我們指定的 width 和 height 是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。 不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾，但是也不是沒不是沒有辦法解決。Box Model Hack 提供了解決之道，重點在於利用 IE5/5.5 對 CSS 解讀上的 Bug ，讓我們所希望之元素正確的寬高能正確地在 IE5/5.5 顯示出來。對於 absolute 和 fixed 而言，錯誤的 Box Model 或許影響較小 (不過也絕對不是沒有影響，像是如果要正確控制圖層的寬度時)；但對 relative 和 static 來說，因為它們都還是會保留其所佔有的空間。因此如何正確地調整 content 的大小，就會影響到我們的排版。以下我們來看看 Box Model 的各個組成分子。
(請特別注意：我在以下圖示中，元素上色的部份，除了有特別說明外，都是包含 border + padding + content ，這點非常重要！因為除了 body 標籤外，元素的 background 屬性的作用都不會包含 margin。) borderborder 是一個「加上去」的屬性，換句話說，一般都是用來區隔元素與元素用的。 border 的外圍即為元素的最外圍，因此計算元素實際的寬高時，就一定要將 border 納入。換句話說， border會佔有空間，所以在計算精細的版面時，一定要將 border 的影響考慮進去。如下圖，黑色虛線部份即為 border ： 還有一點要特別注意，如果我們在元素上設定背景色時， IE 是作用在 padding + content ，而 Firefox 則是作用在 border + padding + content 上。 paddingpadding 會在元素內容的周圍加上我們所指定大小的空間；而如果我們沒有指定元素的寬高時，那麼該元素的內容就會受到 padding 所擠壓。如下圖： 如果元素的內容中有行內顯示元素時，我們可以利用 padding 的設定來讓它們在我們想要的地方折行，而不用對 content 指定寬度；這樣的技巧我用在全版面的兩欄式版面上，使得我不用對難用的 width 屬性傷腦筋。其實 padding 就這麼簡單，不過可別小看它，在 CSS 排版裡， padding 加上 margin 的設定，就能夠使版面千變萬化。margin
margin 的意義就是該元素與其他元素間的邊界距離，它的應用大概也算是 CSS 排版很重要的技術之一。所以我打算多花一點時間解釋它。我們可以分以下兩種狀況解釋：「元素與相鄰元素的距離」及「元素與父元素間的距離」。「元素與相鄰元素的距離」指得是元素間是緊鄰的 (不論是區塊顯示元素或行內顯示元素) ，而沒有階層關係。例如： &lt;span id=&quot;i1&gt;行內顯示元素1&lt;/span&gt;&lt;span id=&quot;i2&quot;&gt;行內顯示元素2&lt;/span&gt; 這兩個 span 元素就是緊鄰關係。而 &lt;span&gt; 屬於行內顯示元素(display: inline) ，因此它們的邊界距離就是 i1 的 margin-right 加上 i2 的 margin-left ，如下圖。 另一種緊鄰關係是區塊顯示元素，例如：&lt;div id=&quot;b1&quot;&gt;區塊顯示元素1&lt;/div&gt;&lt;div id=&quot;b2&quot;&gt;區塊顯示元素2&lt;/div&gt;&lt;div&gt; 屬於區塊顯示元素，也就是在它的前後會加入換行的控制。要注意的是，區塊顯示元素它們的邊界距離是重疊的！而當 b1 的 margin-bottom 大於 b2 的 margin-top 時， b1 和 b2 實際的距離就以 b1 的 margin-bottom 為準，如下圖。
還有一種緊鄰關係是浮動元素，基本上它會是個區塊顯示元素，但 margin 的呈現關係和行內顯示元素是很像的，這我會在介紹浮動元素時再加以說明。「元素與父元素間的距離」就是指元素之間有階層關係時的邊界距離。例如：
&lt;div id=&quot;b3&quot;&gt;
  &lt;div id=&quot;b4&quot;&gt;內部區塊&lt;/div&gt;
&lt;/div&gt;
其中 b3 就是父元素， b4 則是子元素。 它們的邊界關係如下圖：我們可以看到，子元素的邊界起始會以父元素的 Content 區為基準。 上面我們都是將 margin 設為正值，例如將元素的 margin-top 設為 20px ，那麼元素上面就會多出 20px 的空間。注意，我是說多出空間，而非向下移動！有什麼差別呢？向下移動的定義是我們讓元素成為區塊顯示(display: block)或是它原本就是區塊顯示元素，然後指定它的 position 為 relative ，最後設定它的 top 為正值。而多出空間則不論它的 position 設定為何，硬是擠進我們指定的空間。而且設定 margin 之後，頁面內容超過螢幕顯示範圍，即時有捲軸也無法呈現完整的內容。不過 IE6 和 FireFox 兩者對 Box Model 在 margin 的實作又有點不太一樣。IE6 就算指定了父元素的 height ，如果子元素的高度超過父元素的 height ，父元素就會被撐大，然後保留子元素 margin-bottom 的空間；而 FireFox 就不會。哪個實作是對的，我也不太清楚。margin 也可以指定為負值，例如我在這篇「如何正確實作出固定寬度且置中的版型？」裡，運用到了將 margin-left 設定為負值的技巧。這裡我再加以說明，將 margin 設定為負值是怎麼一回事。在「元素與元素間緊鄰」時，我們將 margin 設定為負值，會使得 margin 設定為負值的元素「疊」到另一個元素上 (不過還是要視另一個元素所設定的邊界距離而定) 。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
「元素間有階層性關係」時的關係，如果子元素的所指定的 margin 負值的絕對值大於父元素的 border + padding 時，就會使得子元素跑到父元素的外部去了。如圖，我們指定藍色元素的 margin-left 為 -100px ，那麼該元素就會往左跑 100px ；這時如果其父元素 (淺黃色) 的 border-left 和 padding-left 相加小於 100px ，我們就會看到該元素就會突出於父元素的左邊。總而言之，將 margin 指定為負值在 CSS 排版上有非常大的用處，如果能將它了然於胸，相信你在 CSS 排版的功力一定會大增的。這篇我僅描述了 CSS Box Model 的一些基本觀念，雖然不是非常深入，但希望能夠讓大家對它們有基本的認知。而 CSS 排版除了 Position 和 Box Model 外，還有一樣非常值得探討的技術，就是浮動 (float) ；我將會在下次的文章中談到它。
]]>
	</description>
<language>zh-tw</language>
<generator>Roodo Blog System</generator>
<copyright>All Rights Reserved</copyright>
<atom:link href="http://blog.roodo.com/jaceju/archives/100724-comment.xml" rel="self" type="application/rss+xml" />
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[我常常用到這些標籤,但是現在才知道架構是這樣來的~真的很感謝你!好文章..]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558101</guid>
		<category>文章回應</category>
	<pubDate>Tue, 17 Oct 2006 03:02:37 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[歡迎連結 ^^]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558099</guid>
		<category>文章回應</category>
	<pubDate>Fri, 28 Apr 2006 15:51:42 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[這類文章對完全的新手來說
可能真的比較難了解

但是對我這種半吊子來說
實在太好用了
剛好幫我釐清一些觀念

之前
在嘗試錯誤後
自己隱約了解 margin 跟 padding 有所不同
而有了版主的圖示
就更清楚了

感謝不吝分享的版主!

另
請問我可以把將您的教學文章放在我網誌作連結嗎?]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558097</guid>
		<category>文章回應</category>
	<pubDate>Fri, 28 Apr 2006 15:34:08 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[沒有指定 sidebar 的寬度。

請參考：<a href="http://blog.roodo.com/jaceju/archives/152005.html">樂多Blog排版入門</a>]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558095</guid>
		<category>文章回應</category>
	<pubDate>Sat, 17 Sep 2005 14:20:46 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[可以請問為何我的sidebar在firefox看會掉下去..而且右側同contetn的右側，而我在ie看都是正常的...雖然你寫的說明我似乎有了解...但是對css真的不是太熟，還在初學階段，總是東改西改似乎沒有效果...可以麻煩你幫我看一下嗎？感謝]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558093</guid>
	<author>fanelee@gmail.com(fanelee)</author>	<category>文章回應</category>
	<pubDate>Fri, 16 Sep 2005 12:08:21 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[> <~  好吧
還是謝謝你了
]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558091</guid>
		<category>文章回應</category>
	<pubDate>Mon, 05 Sep 2005 20:03:13 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[目前為止， CSS 好像沒有這樣的屬性可設定。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558089</guid>
		<category>文章回應</category>
	<pubDate>Mon, 05 Sep 2005 09:02:02 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[啊
補一句:
~~ 大感謝 ~~]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558087</guid>
		<category>文章回應</category>
	<pubDate>Mon, 05 Sep 2005 00:59:37 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[版主你好:
我想請問的是
如何改變我的背景圖大小呢?
也就是說
我想藉由放大或縮小圖來改變版面的顏色比例啦

]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558085</guid>
		<category>文章回應</category>
	<pubDate>Mon, 05 Sep 2005 00:58:27 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[請參考我的另一篇：<a href="http://blog.roodo.com/jaceju/archives/152005.html">樂多Blog排版入門</a>]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558083</guid>
		<category>文章回應</category>
	<pubDate>Sat, 13 Aug 2005 12:29:22 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[你的解說真是十分詳盡
我尚初學,看完有些粗淺概念
但自己操作又問題重重..

我依據樂多原本的版型之一去改CSS
將container加寬,banner拉長,好讓content和link有更大空間
但為什麼中間那塊沒法調整呢
可否請你幫忙看看問題在哪兒...
謝謝]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558081</guid>
		<category>文章回應</category>
	<pubDate>Sat, 13 Aug 2005 02:27:29 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[嗯，最近比較沒空，找時間再幫你仔細看看好了。

先這裡說明一下，樂多的 DOCTYPE 是 XHTML 1.0 Transitional ；也就是說它的 Box Model 的解釋方法是標準的 CSS Box Model ，而非 IE5 的錯誤模型。

而你在 #links2 使用了絕對定位，就應該不會有這樣的問題。我推斷應該是你的 CSS 某個地方出了小差錯，使得 IE 解讀錯誤。當然這不一定是正確的推斷，我得仔細瞧瞧才會知道真正的原因。

不然你可以先用我的例子去改改看，我已經確認過在 IE 和 Firefox 上都能正確顯示了。
]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558079</guid>
		<category>文章回應</category>
	<pubDate>Mon, 08 Aug 2005 16:49:51 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[Hi Jaceju：

您那篇傑作我看了很多次，但我資質太低，琢磨不出什麼來，也照你的建議修了一修，似乎還是不行，哎哎哎．．．總之很感謝，我會再多試試的！]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558077</guid>
		<category>文章回應</category>
	<pubDate>Mon, 08 Aug 2005 15:51:11 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[既然你的 #links2 都已經是 position: absolute 了，那就不用指定 margin-left: 610px ，直接把它定位在右邊就行了。參考一下我的「樂多三欄式 CSS 樣版入門」，裡面的 #links2 就是用絕對定位的方式做的。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558075</guid>
		<category>文章回應</category>
	<pubDate>Mon, 08 Aug 2005 10:57:12 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[Hi Jaceju:

我覺得這篇把CSS的概念解釋得很清楚耶！不過或許是我是初入門者，在操作上就會頭昏腦脹的，但是這篇文章的確對了解CSS的觀念很有幫助．

有個事情想向您請教與求救，就是我的blog經過我不入流的修改版型後，改成三欄的，先前都沒什麼大問題，但最近不知為什麼，從IE瀏覽時，右欄都跑到下方去了，而firefox就沒問題，我也修了文章本身的html，也調了邊欄的輪播，但都沒效，猜想是否犯了你提的box model設定的問題，只是我資質駑鈍些，看了半天你的文章，仍搞不清楚怎麼調才是，不知能否請您幫忙看看，不好意思麻煩你了！真是謝謝！]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558073</guid>
		<category>文章回應</category>
	<pubDate>Mon, 08 Aug 2005 10:35:09 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[我有個朋友就快被IE錯誤的容器模型搞瘋了]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558071</guid>
		<category>文章回應</category>
	<pubDate>Mon, 01 Aug 2005 00:00:36 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[你說的書我最近有買喔，我最新的 Blog 文章裡有提到。

也希望我的 Blog 能幫上你的忙~~]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558069</guid>
		<category>文章回應</category>
	<pubDate>Sun, 31 Jul 2005 23:54:07 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[寫的真清楚,最近小弟也在研究 CSS 的東西,有買了一本書,博碩文化的網頁設計標準規格,配合著您的說明,真的很清楚~~]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558067</guid>
	<author>bruce.tw@gmail.com(bruce)</author>	<category>文章回應</category>
	<pubDate>Sun, 31 Jul 2005 20:38:30 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[嗯，曾經有想過提供，但是想不到一個好的例子。

看看其他有實作的文章吧，這篇當做參考就好了。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558065</guid>
		<category>文章回應</category>
	<pubDate>Thu, 23 Jun 2005 16:46:17 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[這樣的文章似乎是進階使用者才能看的懂的...Q_Q
不過已經讓我知道很多CSS厲害的地方，謝謝作者用心寫的文章。

有做出來可以看的見的效果嗎？
搭配運用方式的實際作成例子應該可以讓人更容易懂一點吧，個人建議^^"]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558063</guid>
		<category>文章回應</category>
	<pubDate>Thu, 23 Jun 2005 14:45:40 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[感謝提供資訊 ^^

一直不清楚 border 的位置說，沒想到那位作者竟然把它給 3D 化了。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558061</guid>
		<category>文章回應</category>
	<pubDate>Tue, 31 May 2005 16:57:37 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[別灰心，Box Model 本來就不太容易解釋，你可以介紹這個：http://leolo.ath.cx/~bobchao/index.php?mode=link&bid=404 也可以寫信向作者要授權直接放在這裡（他超熱心的！）]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558059</guid>
		<category>文章回應</category>
	<pubDate>Tue, 31 May 2005 16:31:42 +0800</pubDate>
</item>
<item>
	<title>回應：CSS 排版觀念：Box Model</title>
	<description><![CDATA[該檢討自己了...
因為我同事說，這篇他看不懂。

的確，沒有實際演練過，真的滿難懂的。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/100724.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/100724.html#comment-4558057</guid>
		<category>文章回應</category>
	<pubDate>Mon, 30 May 2005 22:38:08 +0800</pubDate>
</item>
</channel>
</rss>