第六章区块性质的ＣＳＳ

本章ＣＳＳ的重要效率本章引见的是区块本质的ＣＳＳ训令以及它 们的运用与个性，不妨设定与遏制区块的场所，巨细及边际宽窄等本质。本章也将分红 两个部份为您引见，第一部份要讲的是区块各部份称呼与观念的引见，对于区块有一点 观念后，第二部份才再加入区块本质的ＣＳＳ训令的引见。区块各部份称呼与观念本来咱们还不妨把所谓的「区块」细分红如 底下图形所表白的几个部份。

由外而内为您作引见：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=20ptdiv { margin: 20pt 15pt }→top=20pt;right=15pt;bottom=20pt;left=15ptdiv { margin: 20pt 15pt 10pt }→top=20pt;right=15pt;bottom=10pt;left=15ptborder-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=2ptdiv { border-width: 2pt 3pt }→top=2pt;right=3pt;bottom=2pt;left=3ptdiv { border-width: 2pt 3pt 4pt }→top=2pt;right=3pt;bottom=4pt;left=3ptborder-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=reddiv{border-color:red green }→top=red;right=green;bottom=red;left=greendiv{border-color: red green blue}→top=red;right=green;bottom=blue;left=greenborder-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=outsetdiv{border-width:outset inset}→top=outset;right=inset;bottom=outset;left=insetdiv{border-width:outset inset ridge}→top=outset;right=inset;bottom=ridge;left=insetborder-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=1ptdiv { padding: 1pt 2pt }→top=1pt;right=2pt;bottom=1pt;left=2ptdiv { padding: 1pt 2pt 3pt }→top=1pt;right=2pt;bottom=3pt;left=2pt