CSS應用基礎教程：區塊性質

　　本　章　C　S　S　的　主　要　作　用

　　本章介紹的是區塊性質的CSS指令以及它 們的應用與特性，可以設定與控制區塊的位置，大小及邊緣寬度等性質。本章也將分成 兩個部份為您介紹，第一部份要講的是區塊各部份名稱與概念的介紹，對於區塊有一點 概念後，第二部份才再進入區塊性質的CSS指令的介紹。

　　區　塊　各　部　份　名　稱　與　概　念

　　其實我們還可以把所謂的「區塊」細分成的幾個部份。

　　由外而內為您作介紹：

　　MARGIN： 邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調整來達到內容元素位置調整的目的。

　　BORDER： 邊框，就是外框的部份，經由CSS指令您可以控制邊框的寬度、顏色和樣式，不再死板!

　　PADDING： 補白，也就是內容元素與框架之間的這段距離與空間，也可以利用CSS指令去控制大小。

　　元素： 內容元素，也就是您放置於該區塊內的內容，或為文字，或為圖形，或為所有其它元素。

　　附帶一提的是，所謂的區塊寬度是指整個包含邊緣在內的寬度，而元素寬度指的只 是內容元素的寬度。有了這些對區塊各部份的基本概念與認識之後，接下來就要來介紹 控制區塊各部份分別的的CSS指令了!

　　區　塊　性　質　的　C　S　S　指　令

　　margin-top　　　設定上邊緣寬度 margin-right　 設定右邊緣寬度

　　margin-bottom　設定下邊緣寬度 margin-left　　設定左邊緣寬度

　　支　持：IE3、IE4、NC4

　　適　用：區塊元素

　　可能值： 長度單位，請參考第一章基本單位的相關說明

　　百分比，相對於元素寬度大小

　　auto 使用浏覽器預設值

　　預設值：0

　　繼承性：無

　　一般范例：DIV { margin-top : 20pt }

　　同軸范例：<DIV style="margin-top:20pt">

　　margin　綜合設定邊緣寬度

　　支　持：IE3、IE4、NC4

　　適　用：區塊元素

　　可能值：依序設定top,right,bottom,left的邊緣寬度 {1,4} 長度單位，請參考第一章基本單位的相關說明

　　{1,4} 百分比，相對於元素寬度大小

　　auto {1,4} 使用浏覽器預設值

　　預設值：無

　　繼承性：無

　　一般范例：DIV { margin : 20pt 15pt 10pt 5pt }

　　同軸范例：<DIV style="margin:20pt 15pt 10pt 5pt">

　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊緣;如果只 有指定一個合法設訂值，則會統一套用於四個邊持;若只有指定二或三個合法設定值，則 未指定的邊緣會套用對邊的寬度設定值。

　　DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt

　　DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt

　　DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt

　　border-top-width　　設定上邊框寬度 border-right-width　設定右邊框寬度

　　border-bottom-width設定下邊框寬度 border-left-width　　設定左邊框寬度

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值：thin < medium < thick thin 統一的絕對單位，因浏覽器而異

　　medium 統一的絕對單位，因浏覽器而異

　　thick 統一的絕對單位，因浏覽器而異

　　長度單位，請參考第一章基本單位的相關說明

　　預設值：medium

　　繼承性：無

　　一般范例：DIV { border-top-width : 2pt }

　　同軸范例：<DIV style="border-top-width:2pt">

　　border-width　綜合設定邊框寬度

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值：依序設定top,right,bottom,left的邊框寬度 thin {1,4} 統一的絕對單位，因浏覽器而異

　　medium {1,4} 統一的絕對單位，因浏覽器而異

　　thick {1,4} 統一的絕對單位，因浏覽器而異

　　{1,4} 長度單位，請參考第一章基本單位的相關說明

　　預設值：無

　　繼承性：無

　　一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }

　　同軸范例：<DIV style="border-width:4pt 3pt 2pt 1pt">

　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框;如果只 有指定一個合法設訂值，則會統一套用於四個邊框;若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的寬度設定值。

　　DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt

　　DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt

　　DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt

　　border-top-color　　設定上邊框顏色 border-right-color　設定右邊框顏色

　　border-bottom-color 設定下邊框顏色 border-left-color　 設定左邊框顏色

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值： 設定顏色，請參考第一章顏色使用的相關說明

　　預設值：color性質之值

　　繼承性：無

　　一般范例：DIV { border-top-color : BLUE }

　　同軸范例：

　　border-color　綜合設定邊框顏色

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值：依序設定top,right,bottom,left的邊框顏色 {1,4} 設定顏色，請參考第一章顏色使用的相關說明

　　預設值：無

　　繼承性：無

　　一般范例：DIV { border-color : RED GREEN BLUE YELLOW }

　　同軸范例：<DIV style="border-color:RED GREEN BLUE YELLOW">

　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框;如果只 有指定一個合法設訂值，則會統一套用於四個邊框;若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的顏色設定值;若無指定此一性質，則套用color性質之設定值。

　　DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED

　　DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN

　　DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN

　　border-top-style　　設定上邊框樣式 border-right-style　設定右邊框樣式

　　border-bottom-style　設定下邊框樣式 border-left-style　　設定左邊框樣式

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值： none 不顯示邊框

　　dotted 虛線(IE4、NC4浏覽器當作實線)

　　dashed 短直線(IE4、NC4浏覽器當作實線)

　　solid 實線

　　double 雙直線

　　ridge 3D凸線

　　groove 3D凹線

　　outset 3D隆起(IE4不顯示)

　　inset 3D嵌入(IE4不顯示)

　　預設值：none

　　繼承性：無

　　一般范例：DIV { border-top-style : inset }

　　同軸范例：<DIV style="border-top-style:inset">

　　border-style　綜合設定邊框樣式

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值：依序設定top,right,bottom,left的邊框樣式 none {1,4} 不顯示邊框

　　dotted {1,4} 虛線(IE4、NC4浏覽器當作實線)

　　dashed {1,4} 短直線(IE4、NC4浏覽器當作實線)

　　solid {1,4} 實線

　　double {1,4} 雙直線

　　ridge {1,4} 3D凸線

　　groove {1,4} 3D凹線

　　outset {1,4} 3D隆起(IE4不顯示)

　　inset {1,4} 3D嵌入(IE4不顯示)

　　預設值：無

　　繼承性：無

　　一般范例：DIV { border-style : ridge groove outset inset }

　　同軸范例：<DIV style="border-style:ridge groove outset inset">

　　要附帶說明的是，如果指定了四個合法設定值，則會依序套用於四個邊框;如果只 有指定一個合法設訂值，則會統一套用於四個邊框;若只有指定二或三個合法設定值，則 未指定的邊框會套用對邊的樣式設定值。

　　DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset

　　DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset

　　DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset

　　border-top　　 綜合設定上邊框性質 border-right　 綜合設定右邊框性質

　　border-bottom　綜合設定下邊框性質 border-left　　綜合設定左邊框性質

　　支　持：IE4、NC4

　　適　用：區塊元素

　　可能值： 設定該邊框寬度，請參考上面的介紹與說明

　　設定該邊框樣式，請參考上面的介紹與說明

　　設定該邊框顏色，請參考上面的介紹與說明

　　預設值：無

　　繼承性：無

　　一般范例：DIV { border-top : 2pt solid BLUE }

　　同軸范例：<DIV style="border-top:2pt solid BLUE">

　　border