CSS樣式性質表

版面樣式

邊界(margin) 邊框(border-width) 邊界填白(padding)

• * margin ---區塊元件上、右、下、左的邊緣距離
  • 設定法：{margin:上邊界,右邊界,下邊界,左邊界}， 缺少的值則以對邊的設定值代替；若只設定一個值， 則四個邊界值同為此值。
  • 設定值：長度單位（如10px、20pt）、百分比（如120%）。
  • 其他：margin-top、margin-right、margin-bottom、margin-left， 只設定上、右、下、左的邊緣。
    範例：{margin:1,2,3,4}（上=1px,右=2px,下=3px,左=4px）
     
• * border-width ---區塊元件上、右、下、左的邊框寬度
  • 設定法：{border-width:上邊框,右邊框,下邊框,左邊框}， 若缺設定值或只設定一個值，則設定方式與margin相同。
  • 設定值：長度單位（如10px、20pt）、百分比（如120%）。
  • 其他：border-top-width、border-right-width、border-bottom-width、border-left-width， 只設定上、右、下、左的邊框寬度。
    範例：{border-width:1,2,3,4}（上=1px,右=2px,下=3px,左=4px）
     
• * padding ---區塊元件上、右、下、左與邊框間的留白距離
  • 設定法：{padding:上邊界填白,右邊界填白,下邊界填白,左邊界填白}， 若缺設定值或只設定一個值，則設定方式與margin相同。
  • 設定值：長度單位（如10px、20pt）、百分比（如120%）。
  • 其他：padding-top、padding-right、padding-bottom、padding-left， 只設定上、右、下、左的邊界填白。
    範例：{padding:1,2,3,4}（上=1px,右=2px,下=3px,左=4px）
     
• * border-color ---區塊元件上、右、下、左邊框的顏色
  • 設定法：{border-color:上邊框,右邊框,下邊框,左邊框}， 若缺設定值或只設定一個值，則設定方式與margin相同。
  • 設定值：#RRGGBB、rgb(R,G,B)、rgb(R%,G%,B%)、color_name。
  • 其他：border-top-color、border-right-color、border-bottom-color、border-left-color， 只設定上、右、下、左邊框的顏色。
    範例：{border-color:red #ff0088 rgb(0,206,20) rgb(20%,40%,90%)}
     
• * border-style ---區塊元件上、右、下、左邊框的樣式
  • 設定法：{border-style:上邊框,右邊框,下邊框,左邊框}， 若缺設定值或只設定一個值，則設定方式與margin相同。
  • 設定值：solid(實線)、double(雙直線)、groove(3D凹線)、 ridge(3D凸線)、inset(3D嵌入線)、outset(3D隆起線)。
  • 其他：border-top-style、border-right-style、border-bottom-style、border-left-style， 只設定上、右、下、左邊框的樣式。
    範例：{border-style:solid,double,groove,ridge}
     
• * float ---元件(不只是圖形)向左或向右靠， 然後讓文字圍繞在右邊或左邊
  • none：以預設的位置顯示，圖形或元件和文字一起沿著同一條基線並排顯示。
  • left：元件向左靠，文字圍繞在元件右邊(像文繞圖)。
  • right：元件向右靠，文字圍繞在元件左邊(像文繞圖)。
    範例：{float:right}
     
• * clear ---設定浮動元件的周圍文字，其左右是否可以有浮動元件存在
  • none：預設的位置，不取消任何浮動元件的性質。
  • left：文字的左側不能有浮動元件，若有文字會移到下方。
  • right：文字的右側不能有浮動元件，若有文字會移到下方。
  • both：文字的兩側都不能有浮動元件，若有文字會移到下方
    範例：{clear:both}