本　章?。谩。印。印〉摹≈鳌∫∽鳌∮?

　　本章介紹的是區(qū)塊性質(zhì)的ＣＳＳ指令以及它 們的應(yīng)用與特性，可以設(shè)定與控制區(qū)塊的位置，大小及邊緣寬度等性質(zhì)。本章也將分成 兩個部份為您介紹，第一部份要講的是區(qū)塊各部份名稱與概念的介紹，對于區(qū)塊有一點 概念后，第二部份才再進(jìn)入?yún)^(qū)塊性質(zhì)的ＣＳＳ指令的介紹。

區(qū)　塊　各　部　份　名　稱　與　概　念

　　其實我們還可以把所謂的「區(qū)塊」細(xì)分成的幾個部份。
由外而內(nèi)為您作介紹：
MARGIN： 邊緣，雖然是通透的部份，但是可以藉由邊緣寬度的調(diào)整來達(dá)到內(nèi)容元素位置調(diào)整的目的。

BORDER： 邊框，就是外框的部份，經(jīng)由ＣＳＳ指令您可以控制邊框的寬度、顏色和樣式，不再死板！

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

元素： 內(nèi)容元素，也就是您放置于該區(qū)塊內(nèi)的內(nèi)容，或為文字，或為圖形，或為所有其它元素。

　　附帶一提的是，所謂的區(qū)塊寬度是指整個包含邊緣在內(nèi)的寬度，而元素寬度指的只 是內(nèi)容元素的寬度。有了這些對區(qū)塊各部份的基本概念與認(rèn)識之后，接下來就要來介紹 控制區(qū)塊各部份分別的的ＣＳＳ指令了！

區(qū)　塊　性　質(zhì)　的　Ｃ?。印。印≈浮×?

margin-top　　　設(shè)定上邊緣寬度 margin-right　 設(shè)定右邊緣寬度
margin-bottom　設(shè)定下邊緣寬度 margin-left　　設(shè)定左邊緣寬度

支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關(guān)說明
<percentage> 百分比，相對于元素寬度大小
auto 使用瀏覽器預(yù)設(shè)值
預(yù)設(shè)值：0
繼承性：無

一般范例：DIV { margin-top : 20pt }
同軸范例：<DIV style=”margin-top:20pt”>

margin　綜合設(shè)定邊緣寬度
支　持：ＩＥ３、ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊緣寬度 <length> {1,4} 長度單位，請參考第一章基本單位的相關(guān)說明
<percentage> {1,4} 百分比，相對于元素寬度大小
auto {1,4} 使用瀏覽器預(yù)設(shè)值
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { margin : 20pt 15pt 10pt 5pt }
同軸范例：<DIV style=”margin:20pt 15pt 10pt 5pt”>
　　要附帶說明的是，如果指定了四個合法設(shè)定值，則會依序套用于四個邊緣；如果只 有指定一個合法設(shè)訂值，則會統(tǒng)一套用于四個邊持；若只有指定二或三個合法設(shè)定值，則 未指定的邊緣會套用對邊的寬度設(shè)定值。
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　　設(shè)定上邊框?qū)挾?border-right-width　設(shè)定右邊框?qū)挾?
border-bottom-width設(shè)定下邊框?qū)挾?border-left-width　　設(shè)定左邊框?qū)挾?

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：thin < medium < thick thin 統(tǒng)一的絕對單位，因瀏覽器而異
medium 統(tǒng)一的絕對單位，因瀏覽器而異
thick 統(tǒng)一的絕對單位，因瀏覽器而異
<length> 長度單位，請參考第一章基本單位的相關(guān)說明
預(yù)設(shè)值：medium
繼承性：無

一般范例：DIV { border-top-width : 2pt }
同軸范例：<DIV style=”border-top-width:2pt”>

border-width　綜合設(shè)定邊框?qū)挾?
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框?qū)挾?thin {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
medium {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
thick {1,4} 統(tǒng)一的絕對單位，因瀏覽器而異
<length> {1,4} 長度單位，請參考第一章基本單位的相關(guān)說明
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { border-width : 4pt 3pt 2pt 1pt }
同軸范例：<DIV style=”border-width:4pt 3pt 2pt 1pt”>
　　要附帶說明的是，如果指定了四個合法設(shè)定值，則會依序套用于四個邊框；如果只 有指定一個合法設(shè)訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設(shè)定值，則 未指定的邊框會套用對邊的寬度設(shè)定值。
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　　設(shè)定上邊框顏色 border-right-color　設(shè)定右邊框顏色
border-bottom-color 設(shè)定下邊框顏色 border-left-color　 設(shè)定左邊框顏色

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： <color> 設(shè)定顏色，請參考第一章顏色使用的相關(guān)說明
預(yù)設(shè)值：color性質(zhì)之值
繼承性：無

一般范例：DIV { border-top-color : BLUE }
同軸范例：<DIV style=”border-top-color:BLUE”>

border-color　綜合設(shè)定邊框顏色
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框顏色 <color> {1,4} 設(shè)定顏色，請參考第一章顏色使用的相關(guān)說明
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { border-color : RED GREEN BLUE YELLOW }
同軸范例：<DIV style=”border-color:RED GREEN BLUE YELLOW”>
　　要附帶說明的是，如果指定了四個合法設(shè)定值，則會依序套用于四個邊框；如果只 有指定一個合法設(shè)訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設(shè)定值，則 未指定的邊框會套用對邊的顏色設(shè)定值；若無指定此一性質(zhì)，則套用color性質(zhì)之設(shè)定值。
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　　設(shè)定上邊框樣式 border-right-style　設(shè)定右邊框樣式
border-bottom-style　設(shè)定下邊框樣式 border-left-style　　設(shè)定左邊框樣式

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： none 不顯示邊框
dotted 虛線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實線）
dashed 短直線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實線）
solid 實線
double 雙直線
ridge ３Ｄ凸線
groove ３Ｄ凹線
outset ３Ｄ隆起（ＩＥ４不顯示）
inset ３Ｄ嵌入（ＩＥ４不顯示）
預(yù)設(shè)值：none
繼承性：無

一般范例：DIV { border-top-style : inset }
同軸范例：<DIV style=”border-top-style:inset”>

border-style　綜合設(shè)定邊框樣式
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的邊框樣式 none {1,4} 不顯示邊框
dotted {1,4} 虛線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實線）
dashed {1,4} 短直線（ＩＥ４、ＮＣ４瀏覽器當(dāng)作實線）
solid {1,4} 實線
double {1,4} 雙直線
ridge {1,4} ３Ｄ凸線
groove {1,4} ３Ｄ凹線
outset {1,4} ３Ｄ隆起（ＩＥ４不顯示）
inset {1,4} ３Ｄ嵌入（ＩＥ４不顯示）
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { border-style : ridge groove outset inset }
同軸范例：<DIV style=”border-style:ridge groove outset inset”>
　　要附帶說明的是，如果指定了四個合法設(shè)定值，則會依序套用于四個邊框；如果只 有指定一個合法設(shè)訂值，則會統(tǒng)一套用于四個邊框；若只有指定二或三個合法設(shè)定值，則 未指定的邊框會套用對邊的樣式設(shè)定值。
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　　 綜合設(shè)定上邊框性質(zhì) border-right　 綜合設(shè)定右邊框性質(zhì)
border-bottom　綜合設(shè)定下邊框性質(zhì) border-left　　綜合設(shè)定左邊框性質(zhì)

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： <border-width> 設(shè)定該邊框?qū)挾?，請參考上面的介紹與說明
<border-style> 設(shè)定該邊框樣式，請參考上面的介紹與說明
<border-color> 設(shè)定該邊框顏色，請參考上面的介紹與說明
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { border-top : 2pt solid BLUE }
同軸范例：<DIV style=”border-top:2pt solid BLUE”>

border　綜合設(shè)定邊框性質(zhì)
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： <border-width> 設(shè)定邊框?qū)挾龋垍⒖忌厦娴慕榻B與說明
<border-style> 設(shè)定邊框樣式，請參考上面的介紹與說明
<border-color> 設(shè)定邊框顏色，請參考上面的介紹與說明
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { border : 2pt solid BLUE }
同軸范例：<DIV style=”border:2pt solid BLUE”>
　　要附帶說明的是，這個指令只能指定一組設(shè)定值，也就是說，上右下左四個邊框都將套用同一組的設(shè)定值，而不能作個別邊框的設(shè)定值變化。

padding-top　　　設(shè)定上方補白寬度 padding-right　 設(shè)定右方補白寬度
padding-bottom　設(shè)定下方補白寬度 padding-left　　設(shè)定左方補白寬度

支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值： <length> 長度單位，請參考第一章基本單位的相關(guān)說明
<percentage> 百分比，相對于元素寬度大小
預(yù)設(shè)值：0
繼承性：無

一般范例：DIV { padding-top : 5pt }
同軸范例：<DIV style=”padding-top:5pt”>

padding　綜合設(shè)定補白寬度
支　持：ＩＥ４、ＮＣ４
適　用：區(qū)塊元素
可能值：依序設(shè)定top,right,bottom,left的補白寬度 <length> {1,4} 長度單位，請參考第一章基本單位的相關(guān)說明
<percentage> {1,4} 百分比，相對于元素寬度大小
預(yù)設(shè)值：無
繼承性：無

一般范例：DIV { padding : 2pt 5pt 2pt 5pt }
同軸范例：<DIV style=”padding:2pt 5pt 2pt 5pt”>
　　要附帶說明的是，如果指定了四個合法設(shè)定值，則會依序套用于四個補白；如果只有指定一個合法設(shè)訂值，則會統(tǒng)一套用于四個補白；若只有指定二或三個合法設(shè)定值，則 未指定的補白會套用對邊的寬度設(shè)定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt
DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt
DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt