版面配置(Display)

`position`屬性

非繼承屬性，指定元素的配置方式。再利用top、bottom、left、right屬性指定配置位置。有指定position屬性的稱做位置元素。position屬性指定為absolute時，以上層的位置元素為基準配置，若上層區塊元素為非位置元素，則以html元素為基準配置。top、bottom只要設其中之一即可，兩者都設的話，只會取top值。left、right亦只要設其中之一即可，兩者都設的話，只會取left值。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
position	all	static(Default值) relative absolute fixed inherit	→ 原本的位置，top、bottom、left、right屬性指定無效 → top、bottom、left、right屬性指定相對位置 → top、bottom、left、right屬性指定絕對位置 → 基點和absolute相同，捲軸即使捲動，表示領域固定 → 強制繼承上層元素的屬性值

.position1	{ position:relative;top:10px;left:30px; }

.position2	{ position:relative;top:20px;left:60px; }

.position3	{ position:relative;top:30px;left:90px; }

output

`top`屬性

非繼承屬性，指定位置元素(設定有position屬性的元素)的上邊離上層涵蓋元素的距離。top、bottom只要設其中之一即可，兩者都設的話，只會取top值。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
top	all	長度百分比(%) auto(Default值) inherit	→ em、px等長度值 → 上層涵蓋區塊高度的百分比 → 根據bottom的值而自動調整 → 強制繼承上層元素的屬性值

.position	{ position:relative;bottom:auto;top:10px; }

output

`bottom`屬性

非繼承屬性，指定位置元素(設定有position屬性的元素)的下邊離上層涵蓋元素的距離。top、bottom只要設其中之一即可，兩者都設的話，只會取top值。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
bottom	all	長度百分比(%) auto(Default值) inherit	→ em、px等長度值 → 上層涵蓋區塊高度的百分比 → 根據top的值而自動調整 → 強制繼承上層元素的屬性值

.position	{ position:relative;top:auto;bottom:-10px; }

output

`left`屬性

非繼承屬性，指定位置元素(設定有position屬性的元素)的左邊離上層涵蓋元素的距離。left、right只要設其中之一即可，兩者都設的話，只會取left值。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
left	all	長度百分比(%) auto(Default值) inherit	→ em、px等長度值 → 上層涵蓋區塊高度的百分比 → 根據right的值而自動調整 → 強制繼承上層元素的屬性值

.position	{ position:relative;right:auto;left:50px; }

output

`right`屬性

非繼承屬性，指定位置元素(設定有position屬性的元素)的右邊離上層涵蓋元素的距離。left、right只要設其中之一即可，兩者都設的話，只會取left值。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
right	all	長度百分比(%) auto(Default值) inherit	→ em、px等長度值 → 上層涵蓋區塊高度的百分比 → 根據left的值而自動調整 → 強制繼承上層元素的屬性值

.position	{ position:relative;left:auto;right:-50px; }

output

`clip`屬性

非繼承屬性，從絕對位置元素(設定position:absolute的元素)切割出部分領域出來。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
clip	絕對位置元素	rect auto(Default值) inherit	→ to、right、bottom、reft順時針切出矩形 → 原本形狀大小 → 強制繼承上層元素的屬性值

img.clip { position: absolute;clip : rect(22px 180px 103px 0px); }

a:hover img.clip{ clip:auto ; }

output

這是甚麼書?選我就知道。

`float`屬性

非繼承屬性，設定文繞的方式。絕對位置元素(position:absolute或position:fixed)除外，所有元素皆適用。置換元素(img、input、object、slect、textarea等6種元素，會改變線內元素的尺寸)以外的元素指定文繞(float)時，必須設定元素的寬度(width)。在CSS2的規格，沒有設定寬度(width)的話，會被認定為"0"。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
float	all	none (Default值) left right inherit	→ 沒有文繞 → 左文繞(區塊靠左，文章接在右邊) → 右文繞(區塊靠右，文章接在左邊) → 強制繼承上層元素的屬性值

.float { float:left;}

.clear	{ clear:left;}

.....

<h3><img class="float" src="pc.gif"/>information Tchnology Network</h3>

<p class="clear">何謂資訊技術網....</p>

output

information Tchnology Network

何謂資訊技術網....

`clear`屬性

非繼承屬性，取消文繞圖的效果。雖然適用於全體元素，但較常用於br元素，其效果和br元素的clear屬性相同。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
clear	all	none (Default值) left right both inherit	→ 不解除 → 解除左文繞(float:left) → 解除右文繞(float:right) → 解除左右文繞(float:right;float:left) → 強制繼承上層元素的屬性值

.float { float:left;}

.clear	{ clear:left;}

.....

<h3><img class="float" src="pc.gif"/>information Tchnology Network</h3>

<p class="clear">何謂資訊技術網....</p>

output

information Tchnology Network

何謂資訊技術網....

`display`屬性

非繼承屬性，指定元素的顯示形態。通常元素分為「區塊」元素和「線內」元素2種。而display屬性能夠指定其他種類。

△Win IE
△Firefox
○Opera
○Safari
△none none MC IE

屬性	適用元素	屬性值	說明
display	all	none block inline inline-block run-in list-item table inline-table table-row table-row-group table-header-group table-footer-group table-column table-column-group table-cell table-caption inherit	→ none → 變成「區塊」元素 → 變成「線內」元素 → 變成可以指定尺寸、內外邊界的「線內」元素 → 變成如同「區塊」元素內的「線內」元素 → 變成表單的項目(li元素) → 變成表格元素(table元素) → 變成「線內」元素內的表格元素(table元素) → 變成表格的行元素(tr元素) → 變成表格的表身元素(tbody元素) → 變成表格的表頭元素(thead元素) → 變成表格的表尾元素(tfoot元素) → 變成表格的行元素(col元素) → 變成表格的行群元素(colgroup元素) → 變成表格的儲存格元素(th元素、td元素) → 變成表格的標題元素(caption元素) → 強制繼承上層元素的屬性值

.inline	{ list-style:none;margin:5px;padding:0px; }

.inline li	{ display:inline;margin:5px;background-color:orange; }

.block	{ display:inline-block;margin:5px;background-color:orange; }

.....

<ul class="inline"><li>HTML</li><li>CSS</li><li>javascript</li></ul>

<ul class="inline"><li>HTML</li><li>CSS</li><li>javascript</li></ul>

<p class="block"><span >HTML</span><span>CSS</span><span>javascript</span></p>

output

HTML
CSS
javascript

將線內span元素變成inline-block元素，設定邊界(margin)→HTMLCSSjavascript

`overflow`屬性

非繼承屬性，指定「區塊」元素內容超出所設定的高度(height屬性值)、寬度(width屬性值)時的顯示方式。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
overflow	「區塊」元素	visible (Default值) hidden scroll auto inherit	→ 顯示超出的內容 → 隱藏超出的內容 → 無論內容有沒有超出都產生捲軸 → 內容超出時產生捲軸 → 強制繼承上層元素的屬性值

.visible { overflow : visible ; }

.hidden  { overflow : hidden ; }

.scroll  { overflow : scroll ; }

.auto    { overflow : auto ; }

output

0123456789012345678901234567890123456789
0123456789012345678901234567890123456789
01234567890123456
0123456789012345678901234567890123456789

`visibility`屬性

非繼承屬性，指定顯示或不顯示「區塊」元素內容。即使是指定不顯示，「區塊」元素的區域會被保留。若不想保留區域，請使用display屬性指定"none"。

△Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
visibility	「區塊」元素	visible (Default值) hidden collapse inherit	→ 顯示內容 → 隱藏內容 → 只適用於表格元素，其他元素同指定hidden(IE不對應) → 強制繼承上層元素的屬性值

a.visible	{ visibility : visible ; }

a.visible:hover { visibility : hidden ; }

output

點到PC就會消失不見

`unicode-bidi`屬性

非繼承屬性，組入(embed屬性)萬用碼(unicode)定義各國主要語言的書寫方向資訊(由左至右或由右至左)和覆蓋(bidi-override屬性)原本文字方向，通常和direction屬性並用，可以改變文書方向和文字方向。但是嘗試的結果，使用direction屬性指定和原本unicode的文書方向相反時，才會覆蓋(bidi-override屬性)原本文字方向，也就是改變文字方向。

○Win IE
○Firefox
○Opera
x Safari
x MC IE

屬性	適用元素	屬性值	說明
unicode-bidi	「區塊」元素	normal (Default值) embed bidi-override inherit	→ 萬用碼的標準文書方向 → direction屬性指定的文書方向，文字方向不改變 → direction屬性指定的文書方向，文字方向跟著改變 → 強制繼承上層元素的屬性值

.rtl	{ unicode-bidi:embed; direction:rtl;}

.rtl_tr	{ unicode-bidi:bidi-override;direction:rtl;}

.ltr	{ unicode-bidi:embed;direction:ltr;}

.ltr_tr	{ unicode-bidi:bidi-override;direction:ltr;}

output

文書方向由右至左，文字方向不變

文書方向由右至左，文字方向改變

文書方向由左至右，文字方向不變

文書方向由左至右，文字方向改變(???)

`direction`屬性

繼承屬性，指定文書方向。和direction屬性並用，可以組入萬用碼的書寫方向的資訊和覆蓋文字方向。

○Win IE
○Firefox
○Opera
○Safari
x MC IE

屬性	適用元素	屬性值	說明
direction	all	ltr (Default值) rtl inherit	→ 由左到右(left to right) → 由右到左(right to left) → 強制繼承上層元素的屬性值

.rtl	{ unicode-bidi:embed; direction:rtl;}

.rtl_tr	{ unicode-bidi:bidi-override;direction:rtl;}

.ltr	{ unicode-bidi:embed;direction:ltr;}

.ltr_tr	{ unicode-bidi:bidi-override;direction:ltr;}

output

文書方向由右至左，文字方向不變

文書方向由右至左，文字方向改變

文書方向由左至右，文字方向不變

文書方向由左至右，文字方向改變(???)

`z-index`屬性

繼承屬性，位置元素(有指定position屬性的元素)有重疊時，指定重疊的順序。

○Win IE
○Firefox
○Opera
○Safari
x MC IE

屬性	適用元素	屬性值	說明
z-index	位置元素	auto(Default值) 數值 inherit	→ 系統自動排列。一般根據元素記述的順序往上重疊。 → 整數，數字越大越上層。 → 強制繼承上層元素的屬性值

.rtl	{ unicode-bidi:embed; direction:rtl;}

.rtl_tr	{ unicode-bidi:bidi-override;direction:rtl;}

.ltr	{ unicode-bidi:embed;direction:ltr;}

.ltr_tr	{ unicode-bidi:bidi-override;direction:ltr;}

output

z-index:3;
z-index:2;
z-index:1;