Change History
Message: [CSS] BOX Model (盒子模型)
Changed By: JinJin
Change Date: February 15, 2014 08:21PM
[CSS] BOX Model (盒子模型)
Change Date: February 15, 2014 08:21PM
[CSS] BOX Model (盒子模型)
<h1>[color=#990000]一、BOX Model (盒子模型)觀念說明[/color]</h1>
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif" border="0">
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
90000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif" border="0">
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
90000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: February 15, 2014 08:19PM
[CSS] BOX Model (盒子模型)
Change Date: February 15, 2014 08:19PM
[CSS] BOX Model (盒子模型)
<h1>[color=#990000]一、BOX Model (盒子模型)觀念說明[/color]</h1>
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif" border="0">
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif" border="0">
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 07, 2011 08:22AM
[CSS] BOX Model (盒子模型)
Change Date: October 07, 2011 08:22AM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
<h1>[color=#990000]一、BOX Model (盒子模型)觀念說明[/color]</h1>
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h2>[解說一] 內距：PADDING </h2>
=======================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其中
<b>[color=#990000]#title_bar標題的html製作語法[/color]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
<h1>[color=#990000]一、BOX Model (盒子模型)觀念說明[/color]</h1>
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h2>[解說一] 內距：PADDING </h2>
=======================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其中
<b>[color=#990000]#title_bar標題的html製作語法[/color]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 03:21PM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 03:21PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h2>[解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h2>[解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 03:09PM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 03:09PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
peat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
peat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 02:29PM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 02:29PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 10:37AM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 10:37AM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 10:36AM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 10:36AM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: October 02, 2011 10:16AM
[CSS] BOX Model (盒子模型)
Change Date: October 02, 2011 10:16AM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....mp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....mp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: September 24, 2011 03:02PM
[CSS] BOX Model (盒子模型)
Change Date: September 24, 2011 03:02PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: September 24, 2011 02:48PM
[CSS] BOX Model (盒子模型)
Change Date: September 24, 2011 02:48PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: September 24, 2011 01:47PM
[CSS] BOX Model (盒子模型)
Change Date: September 24, 2011 01:47PM
[CSS] BOX Model (盒子模型)
Box Model (盒子模型) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: September 24, 2011 01:43PM
[CSS] BOX Moddleel (盒子模型))
Change Date: September 24, 2011 01:43PM
[CSS] BOX Moddleel (盒子模型))
Box Moddleel (盒子模型)) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
一個 Box (盒子) 的實際寬度 (或高度) 是由 content(width寬 (或height高) + padding (內距) + border (邊框) + 所組成。
<b>所以一般我們指定的 width(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding</b> 。
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>，應該是 content + padding + border ，這是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，<b>一個元素真正佔用的<b>視覺空間</b>(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範</b>。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
<i不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
<b>[color=#990000]titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]titile_bar的CSS設定<[/color]/b>
<xmp>#titile_bar {
height: 32px; //內容的高度
width: 840px;
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
padding-top: 5px; //內容與titile_bar 間的距離
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]<b>[color=#990000]titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<xmp>
olor=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
解說一] 內距：PADDING </h2>
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b>
<xmp><div id="titile_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#titile_bar的CSS設定<[/color]</b>
<xmp>
#titile_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與titile_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
]</b>
<xmp><div id="title_bar">
<div align="center"> //置中
百年思索：揮別、延續、創新
</div>
</div></xmp>
<b>[color=#990000]#title_bar的CSS設定<[/color]</b>
<xmp>
#title_bar {
height: 28px; //內容的高度
width: 840px;
padding: 8px; //內容與title_bar 間的距離
font-size: 16px;
font-weight: bolder;
color: #FFF;
background-image: url(images/34_08_08.jpg);
background-repeat: no-repeat;
}</xmp>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 <b>#content</b> 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。</b>
以下是盒子與盒子(元素與元素)之間的關係
<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">
========================================================================
<h1>[color=#990000]二、實例說明：[/color]</h1>
<h2><b>[解說一] 內距：PADDING</b> </h2>
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 <b>#content</b> 的設定則為
<xmp>
#content {
padding: 30px; //文字內容與#content之間的距離
font-size: 14px; //字體大小14px
line-height: 2em; //行間為兩個字高
}
</xmp>
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
Changed By: JinJin
Change Date: September 24, 2011 01:28PM
[CSS] BOX Moddle (盒子模型))
Change Date: September 24, 2011 01:28PM
[CSS] BOX Moddle (盒子模型))
Changed By: JinJin
Change Date: September 24, 2011 01:26PM
[CSS] BOX Moddle (盒子模型))
Change Date: September 24, 2011 01:26PM
[CSS] BOX Moddle (盒子模型))
Original Message
作者: JinJinDate: September 24, 2011 12:02PM
[CSS] BOX Moddle (盒子模型))
Box Moddle(盒子模型)) 是CSS排版裡一個重要的觀念。
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
th(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding 。
換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾
間，應該是 content + padding + border ，這是標準的 CSS 規範。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，一個元素真正佔用的視覺空間(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
[color=#990000]titile_bar標題的html製作語法[/color]
<div id="titile_bar"><br />
<div align="center"> //置中<br />
百年思索：揮別、延續、創新<br />
</div><br />
</div>
[color=#990000]titile_bar的CSS設定<[/color]/b>
#titile_bar {<br />
height: 32px; //內容的高度<br />
width: 840px;<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
padding-top: 5px; //內容與titile_bar 間的距離<br />
}
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]<br />
#titile_bar {<br />
height: 28px; //內容的高度<br />
width: 840px;<br />
padding: 8px; //內容與titile_bar 間的距離<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
}
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG][color=#990000]titile_bar的CSS設定<[/color]
<br />
#titile_bar {<br />
height: 28px; //內容的高度<br />
width: 840px;<br />
padding: 8px; //內容與titile_bar 間的距離<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
}
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
<br />
olor=#990000]#titile_bar標題的html製作語法[/color]</b><br />
<br />
<xmp><div id="titile_bar"><br />
<div align="center"> //置中<br />
百年思索：揮別、延續、創新<br />
</div><br />
</div>
[color=#990000]#titile_bar的CSS設定<[/color]
<br />
#titile_bar {<br />
height: 28px; //內容的高度<br />
width: 840px;<br />
padding: 8px; //內容與titile_bar 間的距離<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
解說一] 內距：PADDING </h2><br />
包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。<b>但現在只要做了DOCT其<b>[color=#990000]#titile_bar標題的html製作語法[/color]</b><br />
<br />
<xmp><div id="titile_bar"><br />
<div align="center"> //置中<br />
百年思索：揮別、延續、創新<br />
</div><br />
</div>
[color=#990000]#titile_bar的CSS設定<[/color]
<br />
#titile_bar {<br />
height: 28px; //內容的高度<br />
width: 840px;<br />
padding: 8px; //內容與titile_bar 間的距離<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
}
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 #content 的設定則為
<br />
#content {<br />
padding: 30px; //文字內容與#content之間的距離<br />
]</b><br />
<br />
<xmp><div id="title_bar"><br />
<div align="center"> //置中<br />
百年思索：揮別、延續、創新<br />
</div><br />
</div>
[color=#990000]#title_bar的CSS設定<[/color]
<br />
#title_bar {<br />
height: 28px; //內容的高度<br />
width: 840px;<br />
padding: 8px; //內容與title_bar 間的距離<br />
font-size: 16px;<br />
font-weight: bolder;<br />
color: #FFF;<br />
background-image: url(images/34_08_08.jpg);<br />
background-repeat: no-repeat;<br />
}
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 #content 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
========================================================================
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 #content 的設定則為
<br />
#content {<br />
padding: 30px; //文字內容與#content之間的距離<br />
font-size: 14px; //字體大小14px<br />
line-height: 2em; //行間為兩個字高<br />
}<br />
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
他將每個元素都視為一個盒子，描述每個元素如何組成，以及元素與元素間相鄰的關係。
也關係著是否能成功的透過CSS表現完美的網頁排版設計。
一個 Box (盒子) 由以下屬性組成：content (元素本身內容) 、padding (內距) 、border (邊框) 、margin (邊距，與另個元素之間的距離)
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
th(寬) 和 height(高) 是 content 的寬和高，而沒有包含 border 和 padding 。
換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾
間，應該是 content + padding + border ，這是標準的 CSS 規範。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成現今許多 CSS 排版上的困擾。
以下是盒子與盒子(元素與元素)之間的關係
換句話說，一個元素真正佔用的視覺空間(也就是CSS中的 background 背景)，應該是 content + padding + border ，這待續.....是標準的 CSS 規範。
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/IMG]
但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
待續.....文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
其中
[color=#990000]titile_bar標題的html製作語法[/color]
[color=#990000]titile_bar的CSS設定<[/color]/b>
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex01.jpg[/IMG]
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG][color=#990000]titile_bar的CSS設定<[/color]
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容content的設定則為
[color=#990000]#titile_bar的CSS設定<[/color]
[color=#990000]#titile_bar的CSS設定<[/color]
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 #content 的設定則為
[color=#990000]#title_bar的CSS設定<[/color]
如圖所示
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex02.jpg[/IMG]
而主內容 #content 的設定則為
YPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif[/IMG]
========================================================================
[color=#990000]二、實例說明：[/color]
n481/parkparkyang/box-moddle-01.gif[/img]
不過在 IE5/5.5 時代，一個元素的寬高則包含了 content + padding + border 。這個錯誤的實作，造成許多 CSS 排版上的困擾。但現在只要做了DOCTYPE宣告，就不會產生以上IE所造成排版上的問題。
以下是盒子與盒子(元素與元素)之間的關係
========================================================================
[color=#990000]二、實例說明：[/color]
[解說一] 內距：PADDING
以第三十四屆全國比較文學會議網站
http://mepopedia.com/group/comparative/
為範例解說:
主內容 #content 的設定則為
因為沒有設定寬度(總寬度為最外層的 #wrapper寬度900px)
所以padding則外內扣的方式
如圖
[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-ex03.jpg[/IMG]
MEPO forum
is powered by Phorum.