pxhere(unsplash)( 二 )


clip 给出 layer 的 clipping(可看的见的)部分 。Clip 可使得 DIV 显示为一个可以定义的很准确的方块 。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小 。clip:rect(top,right,bottom,left);visibility 隐蔽或展现DIV 根据它的值“visible”,“hidden”,“inherit” 。z-index DIV tag 的立 置 。值越大 DIV 的位置越高 。background-color DIV 背景的颜色 。layer-background-color Netscape 的 DIV 背景颜色 。background-image DIV 的背景图象 。layer-background-image Netscape 的 DIV 的背景图象 。● 2.绝对定位和相对定位 (position)绝对定位:定位属性将是网虫们打开幸福之门的钥匙:H4 { position: absolute; left: 100px; top: 43px }这项CSS规则让浏览器将的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置 。注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口 。左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离 。设定这些距离时,你可以使用所学过的各种度单位或比例值 。使用比例值时,比例值的是相对于母体要素的尺寸 。你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图象、QUICKTIME电影等等 。相对定位:绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置 。相对定位指你所定位的要素的位置相对于在文件中所分配的位置 。例:I { position: relative; left: 40px; top: 10px }相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位 。相对定位单元出现在普通的静态定位单元的行间,定位时没有把自己和静态定位单元完全分开 。如果你停止使用相对定位,则文字的显示位置将恢复正常 。使用相对定位时要小心,否则容易将页面弄得非常乱 。除了相对定位和绝对定位,你还可以使用static(静止)参数值 。Static 是 position 特性的缺省值 。它的使用 同普通HTML中的定位 ,不能附加特殊的定位设置 。也就是说,除了边距特性,或通过使用 float 特性来浮动单元可影响单元的定位外,其它均不可以 。● 3.定位单元的控制 (width、height、visiblility)除了控制定位单元的左上角位置,你还可以控制单元的宽度和高度,及单元在页面的可视性 。宽度:定位了的要素在页面上显示时仍然会从左到右一直显示 。利用宽度属性就可以设定字符向右流动的限制,即设定要素的宽度 。DIV { position: absolute; left: 200px; top: 40px; width: 150px }浏览器接到这项规则时,它将文字按照规则规定的效果显示,还将段落的更大水平尺寸限制在150象素 。宽度属性只适用于绝对定位的要素 。你可以使用我们学过的任何一种长度单位,或使用比例值设定宽度,比例值指相对于母体要素的比例 。IE 4中,这项属性还可用于图象 。你可以通过宽度设置人为地拉宽或压缩图象 。高度:理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:DIV { position: absolute; left: 200px; top: 40px; height: 150px }这里我用了“理论上讲”,因为有些浏览器不支持高度属性 。可视性:利用CSS,你可以隐藏要素,使其在页面上看不见 。这条属性对于定位了的和未定位的要素都适用 。H4 { visibility: hidden }选项:visible 使要素可以被看见hidden 使要素被隐藏inherit 指它将继承母体要素的可视性设置 。值 inherit 为缺省值 。这使单元继承父单元的可见性 。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏 。这一继承性可被明确指定的可见性取代 。例如,段内的 EM 单元被指定为可见,这时如果该段被隐藏,则段内的所有其它内容都将消失,而唯有 EM 单元中的文本是可见的 。当一个要素被隐藏后,它仍然要占据浏览器窗口中的原有空间 。所以,如果你将文字包围在一幅被隐藏的图象周围,那么,其显示效果将是文字包围着一块空白区域 。此新闻这条属性在编写语言和使用动态HTML时很有用,比如你可以使某段落或图象只在鼠标滑过时才显示 。● 4.单元层次 (z-index)特性 z-index 用于堆叠屏幕上的单元 。缺省情况下,单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说,后出现单元堆叠在早出现单元的上面 。Z-index 特性实际上定义同属(sibling)单元的堆叠顺序以及单元相对父单元的堆叠 。按照规范草案,具有正 z-index 值的单元群都堆叠在父单元之上,它们自己的堆叠顺序则按其取值的大小来决定(值大的单元在上层) 。同样,具有负 z-index 值的单元群都堆叠在父单元之下,它们自己的堆叠顺序也按取值的大小来定(值大的单元在上层,例如值为 -1 的单元在值为 -2 的单元的上面) 。该参数值使用纯整数 。z-index用于绝对定位或相对定位了的要素 。你也可以给图象设定z-index 。(对于Communicator,更好将