CSS方框屬性

css

上邊界

文法:  margin-top: <值>
 
允許值:  <長度> | <百分比> | auto
 
初始值:  0
 
適用於:  所有元素
 
向下相容:  否
 
上邊界屬性用一個指定的長度或百分比值來設定元素的上邊界。百分比值參考上階項目的寬度。允許使用負值邊際。

例如，以下的規則將消除檔案的上邊界。

BODY { margin-top: 0 }
注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。

右邊界

文法:  margin-right: <值>
 
允許值:  <長度> | <百分比> | auto
 
初始值:  0
 
適用於:  所有元素
 
向下相容:  否
 

右邊界屬性用一個指定的長度或百分比值來設定元素的右邊界。百分比值參考上階項目的寬度。允許使用負值邊際。

例如:

P.narrow { margin-right: 50% }
注意如果邊界在水平方向鄰接(重疊)了，不會改用其它邊界值。

下邊界

文法:  margin-bottom: <值>
 
允許值:  <長度> | <百分比> | auto
 
初始值:  0
 
適用於:  所有元素
 
向下相容:  否
 

下邊界屬性用一個指定的長度或百分比值來設定元素的下邊界。百分比值參考上階項目的寬度。允許使用負值邊際。

例如:

DT { margin-bottom: 3em }
注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。

左邊界

文法:  margin-left: <值>
 
允許值:  <長度> | <百分比> | auto
 
初始值:  0
 
適用於:  所有元素
 
向下相容:  否
 

左邊界屬性用一個指定的長度或百分比值來設定元素的左邊界。百分比值參考上階項目的寬度。允許使用負值邊際。

例如:

ADDRESS { margin-left: 50% }
注意如果邊界在水平方向鄰接(重疊)了，不會改用其它邊界值。

邊界

文法:  margin: <值>
 
允許值:  [ <長度> | <百分比> | auto ]{1,4}
 
初始值:  未定義
 
適用於:  所有元素
 
向下相容:  否
 

邊界屬性用一到四個值來設定元素的邊界，每個值都是長度、百分比或者自動。百分比值參考上階項目的寬度。允許使用負值邊際。

如果四個值都給出了，它們分別被應用於上、右、下和左邊界。如果只給出一個值，它被應用於所有邊界。如果兩個或三個值給出了，省略了的值與對邊相等。

邊界聲明包括以下例子：

BODY { margin: 5em }             /* 所有邊界設為5em */
P    { margin: 2em 4em }         /* 上和下邊界為2em，左和右邊界為4em */
DIV  { margin: 1em 2em 3em 4em } /* 上邊界為1em，右邊界為2em，下邊界為3em，左邊界為4em */
注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。

使用邊界屬性可以一次性地設定所有邊界；也可以選擇使用上邊界、下邊界、左邊界和右邊界屬性。

上補白

文法:  padding-top: <值>
 
允許值:  <長度> | <百分比>
 
初始值:  0
 
適用於:  所有對象
 
向下相容:  否
 

上補白屬性描述上邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上階項目的寬度。不能使用負值。

右補白

文法:  padding-right: <值>
 
允許值:  <長度> | <百分比>
 
初始值:  0
 
適用於:  所有對象
 
向下相容:  否
 

右補白屬性描述右邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上階項目的寬度。不能使用負值。

下補白

文法:  padding-bottom: <值>
 
允許值:  <長度> | <百分比>
 
初始值:  0
 
適用於:  所有對象
 
向下相容:  否
 

下補白屬性描述下邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上階項目的寬度。不能使用負值。

左補白

文法:  padding-left: <值>
 
允許值:  <長度> | <百分比>
 
初始值:  0
 
適用於:  所有對象
 
向下相容:  否
 

左補白屬性描述左邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上階項目的寬度。不能使用負值。

補白

文法:  padding: <值>
 
允許值:  [ <長度> | <百分比 ]{1,4}
 
初始值:  0
 
適用於:  所有對象
 
向下相容:  否
 

補白屬性是上補白、右補白、下補白和左補白屬性的略寫。

一個元素的補白是邊框和元素的內容之間的間隔的數值。可以給出從一到四的值，每個值可以是長度或百分比。百分比值參考上階項目的寬度。不能使用負值。

如果四個值都給出了，它們分別應用於上、右、下和左補白。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。

例如，以下的規則設定上補白為2em，右補白為4em，下補白為5em，左補白為4em:

BLOCKQUOTE { padding: 2em 4em 5em }

上邊框寬度

文法:  border-top-width: <值>
 
允許值:  thin | medium | thick | <長度>
 
初始值:  medium
 
適用於:  所有對象
 
向下相容:  否
 

上邊框寬度屬性用於指定一個元素上邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負值。

也可以用在上邊框、邊框的寬度或邊框的屬性略寫。

右邊框寬度

文法:  border-right-width: <值>
 
允許值:  thin | medium | thick | <長度>
 
初始值:  medium
 
適用於:  所有對象
 
向下相容:  否
 

右邊框寬度屬性用於指定元素的右邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負值。

也可以用在右邊框、邊框的寬度或邊框的屬性略寫。

下邊框寬度

文法:  border-bottom-width: <值>
 
允許值:  thin | medium | thick | <長度>
 
初始值:  medium
 
適用於:  所有對象
 
向下相容:  否
 

下邊框寬度屬性用於指定元素的下邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負值。

也可以用在下邊框、邊框的寬度或邊框的屬性略寫。

左邊框寬度

文法:  border-left-width: <值>
 
允許值:  thin | medium | thick | <長度>
 
初始值:  medium
 
適用於:  所有對象
 
向下相容:  否
 

左邊框寬度屬性用於指定元素的左邊框的寬度。值可以是三個關鍵字其中的一個，都不受字型大小或長度的影響，可以用於實現成比例的寬度。不允許使用負值。

也可以用在左邊框、邊框的寬度或邊框的屬性略寫。

邊框寬度

文法:  border-width: <值>
 
允許值:  [ thin | medium | thick | <長度> ]{1,4}
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

邊框寬度屬性用一到四個值來設定元素的邊界，值是一個關鍵字或長度。不允許使用負值長度。

如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。

這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。

也可以使用略寫的邊框屬性。

邊框顏色

文法:  border-color: <值>
 
允許值:  <顏色>{1,4}
 
初始值:  顏色屬性的值
 
適用於:  所有對象
 
向下相容:  否
 

邊框顏色屬性設定一個元素的邊框顏色。可以使用一到四個關鍵字。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。

也可以使用略寫的邊框屬性。

邊框樣式

文法:  border-style: <值>
 
允許值:  [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
 
初始值:  none
 
適用於:  所有對象
 
向下相容:  否
 

邊框樣式屬性用於設定一個元素邊框的樣式。這個屬性必須用於指定可見的邊框。

可以使用一到四個關鍵字。如果四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。如果給出一個值，它將被運用到各邊上。如果兩個或三個值給出了，省略了的值與對邊相等。

也可以使用略寫的邊框屬性。

上邊框

文法:  border-top: <值>
 
允許值:  <上邊框寬度> || <邊框式樣> || <顏色>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

上邊框屬性是一個用於設定一個元素上邊框的寬度、式樣和顏色的略寫。

注意只能給出一個邊框式樣。

也可以使用略寫的邊框屬性。

右邊框

文法:  border-right: <值>
 
允許值:  <右邊框寬度> || <邊框式樣> || <顏色>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否

右邊框屬性是一個用於設定一個元素右邊框的寬度、式樣、和顏色的略寫。

注意只能給出一個邊框式樣。

也可以使用略寫的邊框屬性。

下邊框

文法:  border-bottom: <值>
 
允許值:  <下邊框寬度> || <邊框式樣> || <顏色>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

下邊框屬性是一個用於設定一個元素的下邊框的寬度、式樣和顏色的略寫。

注意只能給出一個邊框式樣。

也可以使用略寫的邊框屬性。

左邊框

文法:  border-left: <值>
 
允許值:  <左邊框寬度> || <邊框式樣> || <顏色>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

左邊框屬性是一個用於設定一個元素左邊框的寬度、式樣和顏色的略寫。

注意只能給出一個邊框式樣。

也可以使用略寫的邊框屬性。

邊框

文法:  border: <值>
 
允許值:  <邊框寬度> || <r邊框式樣> || <顏色>
 
初始值:  未定義
 
適用於:  所有對象
 
向下相容:  否
 

邊框屬性是一個用於設定一個元素邊框的寬度、式樣和顏色的略寫。

邊框聲明的例子包括：

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }
邊框屬性只能設定四種邊框；只能給出一組邊框的寬度和式樣。為了給出一個元素的四種邊框的不同的值，網頁製作者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。

寬度

文法:  width: <值>
 
允許值:  <長度> | <百分比> | auto
 
初始值:  auto
 
適用於:  塊級和替換元素
 
向下相容:  否
 

每個塊級或替換元素都可以用一個長度或“auto”值來指定其寬度。(替換元素僅指一些已知原有尺寸的元素。HTML替換元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 寬度屬性的初始值為“auto”，即為該元素的原有寬度(有就是元素自己的寬度，例如一個圖象的寬度)。百分比參考上階項目的寬度。不允許使用負的長度值。

這個屬效能用作給出一些INPUT元素的公用長度，好象SUBMIT和RESET按鈕:

INPUT.button { width: 10em }

高度

文法:  height: <值>
 
允許值:  <長度> | auto
 
初始值:  auto
 
適用於:  塊級和替換元素
 
向下相容:  否
 

每個塊級或替換元素都可以用一個長度或“auto”值來指定其高度。(替換元素僅指一些已知原有尺寸的元素。HTML替換元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 高度屬性的初始值為“auto”，即為該元素的原有高度(有就是元素自己的高度，例如一個圖象的高度)。不允許使用負的長度值。

與寬度屬性一樣，高度可以應用於設定圖象的比例:

IMG.foo { width: 40px; height: 40px }
在大多數情況下，我們都建議網頁製作者使用圖象編輯軟體按比例伸縮圖象，因為瀏覽器不可能高品質地伸縮圖象，也因為使用這個屬性縮小圖象會導致使用者下載了一個不必要的龐大檔案。雖然如此，通過寬度和高度屬性伸縮圖象依然是使用者—定義樣式表中一個有用的用作克服視覺問題的選擇。

漂浮

文法:  float: <值>
 
允許值:  left | right | none
 
初始值:  none
 
適用於:  所有元素
 
向下相容:  否
 

漂浮屬性允許網頁製作者將文本環繞在一個元素的周圍. 這同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一樣，但CSS1允許所有對象“漂浮”，而不像HTML 3.2那樣僅僅允許圖象和表格。

清除

文法:  clear: <值>
 
允許值:  none | left | right | both
 
初始值:  none
 
適用於:  所有元素
 
向下相容:  否
 

清除屬性指定一個元素是否允許有元素漂浮在它的旁邊。值left移動元素到在其左邊的漂浮的元素的下面；同樣的值right移動到其右邊的漂浮的元素下面。其他的還有預設的none值，和移動元素到其兩邊的漂浮的元素的下面的none值。這個屬性類似於HTML 3.2的函數<BR CLEAR=left|right|all|none>，但它能應用於所有元素。