空间管理您的位置: SupeSite/X-Space官方站 » 菜鸟中的战斗鸟 » 日志

區塊屬性設定

上一篇 / 下一篇 2007-05-13 12:22:46 / 个人分类：强帖收藏

查看( 57 ) / 评论( 0 ) / 评分( 0 / 0 )

區塊屬性設定

-y.@vx@IT#Z_ t0區塊是指用<DIV>、<SPAN>等標籤所建立出的邏輯區域，或是圖形、表格等均可稱之為區塊。在DHTML中，使用區塊是非常頻繁的，所以區塊設定就顯得非常有用。

CLEAR

功能 :設定浮動元件位置 ( 可設無、左邊、右邊、兩邊 )

[NeVy0語法 : { CLEAR : NONE︱LEFT︱RIGHT︱BOTH }

範例 : {CLEAR:LEFT}

CLIP

功能 :剪輯可見部份

語法 : { CLIP : AUTO︱( shape ) }

Yd+y2a4V0( shape ) - RECT ( top ) ( right ) ( bottom ) ( left )

a*h/y@+Ar0這個性質可決定區塊的哪些範圍是可視的，而元件在此設定範圍外是不可視的。我們必需指定一個矩形區域給它，依序為上、右、下、左座標，而座標原點是此元件的左上角。例如我們可用clip:rect(0,100,100,0)，則從(0,0)至(100,100)間都是可視的，此元件在這範圍外就看不到了。

CURSOR

功能 :設定滑鼠游標 ( 可設自動、十字、箭頭、手形、移動、改變 - 雙箭頭、文字、等待、求助 )

YGQ6B[9_q0語法 :
{ CURSOR : AUTO︱CROSSHAIR︱DEFAULT︱HAND︱MOVE︱E-RESIZE︱NE-RESIZE︱NW-RESIZE︱N-RESIZE︱SE-RESIZE︱SW-RESIZE︱S-RESIZE︱W-RESIZE︱TEXT︱WAIT︱HELP }

DISPLAY

功能 :設定是否顯示 SupeSite/X-Space官方站wcd ?)D S e

uf^|Q5NE6m#Fw0語法 : { DISPLAY : NONE }

5Icsf)C$C0這個性質可設定整個元件要不要顯示，以及顯示的方式。它可用的參數這裡一一介紹。none代表不顯示，且此元件不占任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。list-item代表顯示，與block大致相同。table-header-group只能用在<THEAD>（不知道這個新標籤請至RONDO的HTML教學看看），代表表格在多頁時（如列印），此區之表格將會自動加在有此表格之頁面的第一列。table-header-group與table-footer-group相似，但用於<TFOOT>，作用是表格在多頁時，此區之表格將會自動加在有此表格之頁面的最末列。IE4.0不支援block、inline、list-item這三種設定。使用範例如display:none此元件就被隱藏了 SupeSite/X-Space官方站Y3mGvH

FLOAT

功能 :設定浮動元件接續位置

語法 : { FLOAT : NONE︱LEFT︱RIGHT }

HEIGHT

d(i5l.X'T/{Fq)]0功能 : 設定元件高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

Z;asC/BC/um$o0語法 : { HEIGHT : AUTO︱( length )︱( percentage ) }

?`j+XA8q*m0範例 : {HEIGHT:10pt}

@IMPORT

功能 : 設定輸入排版樣式

語法 : @IMPORT URL ( url )

LEFT

功能 : 設定元件左邊位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

5w'h0o`nZ0語法 : { LEFT : AUTO︱( length )︱( percentage ) }

LIST-STYLE

功能 : 設定條列項目符號

語法 : { LIST-STYLE : KEYWORD︱POSITION︱URL ( url ) } SupeSite/X-Space官方站2R7uyO~7u;N

LIST-STYLE-IMAGE

$m5S3h"T)z6@0功能 : 設定圖片為條列項目符號

語法 : { LIST-STYLE-IMAGE : NONE︱URL ( url ) }

LIST-STYLE-POSITION

功能 : 設定條列項目符號位置 ( 可設內部、外部 )

d!AtJ2Z0語法 : { LIST-STYLE-POSITION : INSIDE︱OUTSIDE } SupeSite/X-Space官方站%o/j{&qd:z;Q

LIST-STYLE-TYPE

c `'zq aXne0功能 : 設定條列項目符號形狀 ( 可設無、圓形、圓圈、正方形、小數點、羅馬符號、希臘符號 )

] m3NdV$t5O0語法 :
{ LIST-STYLE-TYPE : NONE︱DISK︱CIRCLE︱SQUARE︱DECIMAL︱LOWER-ROMAN︱UPPER-ROMAN︱LOWER-ALPHA︱UPPER-ALPHA }

MARGIN

Ymp!{7x0功能 : 設定文字和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

語法 : { MARGIN : AUTO︱( length )︱( percentage ) }

YuR|*t Jx0這個性質一次設定上、下、左、右邊界與區塊外之元件間格距離。使用時應依序指定上、右、下、左，如margin:3px 2px 5px 1px。亦可一次指定四邊，如margin:2px，則全部均設2px。

MARGIN-BOTTOM

;QP[,m8bg1\Rqh0功能 :設定文字和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) SupeSite/X-Space官方站*w|,`F{WO

1_QuK.P0語法 : { MARGIN-BOTTOM : AUTO︱( length )︱( percentage ) } SupeSite/X-Space官方站nL,Z`0@

MARGIN-LEFT

功能 : 設定文字和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

r/q#MQ&oC Y0語法 : { MARGIN-LEFT : AUTO︱( length )︱( percentage ) }

MARGIN-RIGHT

功能 : 設定文字和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) SupeSite/X-Space官方站;C-I`t$|

yshM w-x0語法 : { MARGIN-RIGHT : AUTO︱( length )︱( percentage ) } SupeSite/X-Space官方站1nJd8T&nB t

MARGIN-TOP　

功能 : 設定文字和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

&X!Q"ckgL0語法 : { MARGIN-TOP : AUTO︱( length )︱( percentage ) } SupeSite/X-Space官方站;o9_S5_;m

OVERFLOW

功能 : 設定容器元件顯示方法

&P7e?!d+rvV0語法 : { OVERFLOW : NONE︱CLIP︱SCROLL }

這個性質是設定當區塊內包含的元件大於區塊之寬或高時，顯示的方法。可用值有auto（自動設定，當需要時出現捲軸）、scroll（強迫顯示捲軸，即使內部元件並無超過區塊邊界）、hidden（超出區塊的部份不顯示）、visible（全部顯示，無視區塊大小）。最常用的是overflow:auto讓瀏覽器自動判斷

PADDING

功能 : 設定元件和邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) SupeSite/X-Space官方站/u*BC1e-^m

語法 : { PADDING : ( length )︱( percentage ) }

這個性質一次設定上、下、左、右邊界的間格距離。使用時應依序指定上、右、下、左，如padding:3px 2px 5px 1px。亦可一次指定四邊，如padding:2px，則全部均設2px。

PADDING-BOTTOM

功能 : 設定元件和下邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

語法 : { PADDING-BOTTOM : ( length )︱( percentage ) }

PADDING-LEFT

功能 : 設定元件和左邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

"iJb,K`NW{+b t0語法 : { PADDING-LEFT : ( length )︱( percentage ) }

PADDING-RIGHT

:F w+C[\C*?0功能 : 設定元件和右邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

a*Y s8Qe_ U5x!X0語法 : { PADDING-RIGHT : ( length )︱( percentage ) } SupeSite/X-Space官方站!bn7h5k7h6|+a

PADDING-TOP

!n _nh9L2NuJ0功能 : 設定元件和上邊緣距離 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

m;Rk%}~j4L8O0語法 : { PADDING-TOP : ( length )︱( percentage ) }

PAGE-BREAK-AFTER

功能 : 設定元件後加分頁符號

c%GM1JGO-K0語法 : { PAGE-BREAK-AFTER : AUTO︱LEFT︱RIGHT︱ALWAYS }

PAGE-BREAK-BEFORE

功能 : 設定元件前加分頁符號 SupeSite/X-Space官方站-Fn~0q#GG

zRJ1@-PY]6~0語法 : { PAGE-BREAK-BEFORE : AUTO︱LEFT︱RIGHT︱ALWAYS }

POSITION

e|Mzcx0功能 : 設定元件位置 ( 可設絕對、相對、靜態 )

語法 : { POSITION : ABSOLUTE︱RELATIVE︱STATIC } SupeSite/X-Space官方站R+Q~Xtsl

TOP

功能 : 設定元件上方位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )

語法 : { TOP : AUTO︱( length )︱( percentage ) }

VERTICAL-ALIGN

t;u(F4V-lQ0功能 : 元件垂直調整

語法 : { VERTICAL-ALIGN : BASELINE︱MIDDLE︱SUB︱SUPER︱TEXT-TOP︱TEXT-BOTTOM︱TOP︱BOTTOM } SupeSite/X-Space官方站nK0x `J

VISIBILITY

%?ko'f%hn0功能 : 設定是否可見( 可設可見、隱藏、繼承 ) SupeSite/X-Space官方站%}c'v ^8ly

.B-uN0^l0Q0語法 : { VISIBILITY : VISIBLE︱HIDDEN︱INHERIT }

設定此元件要不要顯示，這個性質與display有相似之處，但不相同。可用值有visible（顯示）、inherit（貼附，如此元件所在之父元件可見，則此元件為可見，反之亦然）、hidden（隱藏，但仍占有空間，此與display:none不同）。用法如visibility:hidden則可隱藏此元件。