第六章　区块性质的ＣＳＳ

本　章　Ｃ　Ｓ　Ｓ　的　主　要　作　用

　　本章引见的是区块本质的ＣＳＳ训令以及它 们的运用与个性，不妨设定与遏制区块的场所，巨细及边际宽窄等本质。本章也将分红 两个部份为您引见，第一部份要讲的是区块各部份称呼与观念的引见，对于区块有一点 观念后，第二部份才再加入区块本质的ＣＳＳ训令的引见。

区　块　各　部　份　名　称　与　概　念

　　本来咱们还不妨把所谓的「区块」细分红如 底下图形所表白的几个部份。

由外而内为您作引见：margin： 边际，固然是通透的部份，然而不妨藉由边际宽窄的安排来到达实质元素场所安排的手段。border： 边框，即是外框的部份，经过ＣＳＳ训令您不妨遏制边框的宽窄、脸色和款式，不复固执！padding： 伏笔，也即是实质元素与框架之间的这段隔绝与空间，也不妨运用ＣＳＳ训令去遏制巨细。元素： 实质元素，也即是您安置于该区块内的实质，或为笔墨，或为图形，或为一切其它元素。

　　附带一提的是，所谓的区块宽窄是指所有包括边际在前的宽窄，而元素宽窄指的只 是实质元素的宽窄。有了那些对区块各部份的基础观念与看法之后，接下来就要来引见 遏制区块各部份分其余的ＣＳＳ训令了！

区　块　性　质　的　Ｃ　Ｓ　Ｓ　指　令

margin-top　　　设定上边际宽窄

margin-right　 设定右边际宽窄

margin-bottom　设定下边际宽窄

margin-left　　设定左边际宽窄

支　持：ＩＥ３、ＩＥ４、ＮＣ４适　用：区块元素大概值：

<length>

长度单元，请参考第一章基础单元的关系证明

<percentage>

百分比，对立于元素宽窄巨细

auto

运用欣赏器预设值

预设值：0接受性：无

普遍典型：div { margin-top : 20pt }同轴典型：<div style="margin-top:20pt">

margin　归纳设定边际宽窄

支　持：ＩＥ３、ＩＥ４、ＮＣ４适　用：区块元素大概值：依序设定top,right,bottom,left的边际宽窄

<length> {1,4}

长度单元，请参考第一章基础单元的关系证明

<percentage> {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　　设定左边框宽窄

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：thin < medium < thick

thin

一致的一致单元，因欣赏器而异

medium

一致的一致单元，因欣赏器而异

thick

一致的一致单元，因欣赏器而异

<length>

长度单元，请参考第一章基础单元的关系证明

预设值：medium接受性：无

普遍典型：div { border-top-width : 2pt }同轴典型：<div style="border-top-width:2pt">

border-width　归纳设定边框宽窄

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：依序设定top,right,bottom,left的边框宽窄

thin {1,4}

一致的一致单元，因欣赏器而异

medium {1,4}

一致的一致单元，因欣赏器而异

thick {1,4}

一致的一致单元，因欣赏器而异

<length> {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　 设定左边框脸色

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：

<color>

设定脸色，请参考第一章脸色运用的关系证明

预设值：color本质之值接受性：无

普遍典型：div { border-top-color : blue }同轴典型：<div style="border-top-color:blue">

border-color　归纳设定边框脸色

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：依序设定top,right,bottom,left的边框脸色

<color> {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　　设定左边框款式

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：

none

不表露边框

dotted

虚线（ＩＥ４、ＮＣ４欣赏器看成实线）

dashed

短曲线（ＩＥ４、ＮＣ４欣赏器看成实线）

solid

实线

double

双曲线

ridge

３Ｄ凸线

groove

３Ｄ凹线

outset

３Ｄ凸起（ＩＥ４不表露）

inset

３Ｄ嵌入（ＩＥ４不表露）

预设值：none接受性：无

普遍典型：div { border-top-style : inset }同轴典型：<div style="border-top-style:inset">

border-style　归纳设定边框款式

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：依序设定top,right,bottom,left的边框款式

none {1,4}

不表露边框

dotted {1,4}

虚线（ＩＥ４、ＮＣ４欣赏器看成实线）

dashed {1,4}

短曲线（ＩＥ４、ＮＣ４欣赏器看成实线）

solid {1,4}

实线

double {1,4}

双曲线

ridge {1,4}

３Ｄ凸线

groove {1,4}

３Ｄ凹线

outset {1,4}

３Ｄ凸起（ＩＥ４不表露）

inset {1,4}

３Ｄ嵌入（ＩＥ４不表露）

预设值：无接受性：无

普遍典型：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　　归纳设定左边框本质

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：

<border-width>

设定该边框宽窄，请参考上头的引见与证明

<border-style>

设定该边框款式，请参考上头的引见与证明

<border-color>

设定该边框脸色，请参考上头的引见与证明

预设值：无接受性：无

普遍典型：div { border-top : 2pt solid blue }同轴典型：<div style="border-top:2pt solid blue">

border　归纳设定边框本质

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：

<border-width>

设定边框宽窄，请参考上头的引见与证明

<border-style>

设定边框款式，请参考上头的引见与证明

<border-color>

设定边框脸色，请参考上头的引见与证明

预设值：无接受性：无

普遍典型：div { border : 2pt solid blue }同轴典型：<div style="border:2pt solid blue">　　要附带证明的是，这个训令只能指定一组织设立定值，也即是说，上右下左四个边框都将套用同一组的设定值，而不许作部分边框的设定值变革。

padding-top　　　设定上方伏笔宽窄

padding-right　 设定右方伏笔宽窄

padding-bottom　设定下方伏笔宽窄

padding-left　　设定左方伏笔宽窄

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：

<length>

长度单元，请参考第一章基础单元的关系证明

<percentage>

百分比，对立于元素宽窄巨细

预设值：0接受性：无

普遍典型：div { padding-top : 5pt }同轴典型：<div style="padding-top:5pt">

padding　归纳设定伏笔宽窄

支　持：ＩＥ４、ＮＣ４适　用：区块元素大概值：依序设定top,right,bottom,left的伏笔宽窄

<length> {1,4}

长度单元，请参考第一章基础单元的关系证明

<percentage> {1,4}

百分比，对立于元素宽窄巨细

预设值：无接受性：无

普遍典型：div { padding : 2pt 5pt 2pt 5pt }同轴典型：<div style="padding:2pt 5pt 2pt 5pt">　　要附带证明的是，即使指定了四个正当设定值，则会依序套用来四个伏笔；即使惟有指定一个正当设订值，则会一致套用来四个伏笔；若惟有指定二或三个正当设定值，则 未指定的伏笔会套用对边的宽窄设定值。

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