萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> div css區塊性質是什麼

div css區塊性質是什麼

大家知道div 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 }

同軸范例:

margin 綜合設定邊緣寬度

支 持:IE3、IE4、NC4

適 用:區塊元素

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

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

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

預設值:無

繼承性:無

一般范例:DIV { 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 }

同軸范例:

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 { 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 }

同軸范例:

要附帶說明的是,如果指定了四個合法設定值,則會依序套用於四個邊框;如果只 有指定一個合法設訂值,則會統一套用於四個邊框;若只有指定二或三個合法設定值,則 未指定的邊框會套用對邊的顏色設定值;若無指定此一性質,則套用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 }

同軸范例:

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{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 }

同軸范例:

border 綜合設定邊框性質

支 持:IE4、NC4

適 用:區塊元素

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

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

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

預設值:無

繼承性:無

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

同軸范例:

要附帶說明的是,這個指令只能指定一組設定值,也就是說,上右下左四個邊框都將套用同一組的設定值,而不能作個別邊框的設定值變化。

padding-top   設定上方補白寬度 padding-right  設定右方補白寬度

padding-bottom 設定下方補白寬度 padding-left  設定左方補白寬度

支 持:IE4、NC4

適 用:區塊元素

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

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

預設值:0

繼承性:無

一般范例:DIV { padding-top : 5pt }

同軸范例:

padding 綜合設定補白寬度

支 持:IE4、NC4

適 用:區塊元素

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

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

預設值:無

繼承性:無

copyright © 萬盛學電腦網 all rights reserved