<DIV>称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 DIV 中的 HTML。
<DIV>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述,这处只介绍 一个属性设定。 以 <DIV align="center"> 为例: align="center" 可选值:center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 <DIV align="center"> 的作用和居中标记 <CENTER>一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。
当我们使用 CSS-P 的时候, 我们主要把它用在 DIV(division)tag 上。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 DIV 中的 HTML。 使用 DIV 的方法跟使用其他 tag 的方法一样: <DIV>This is a DIV tag .</DIV> 如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 <P></P> 是一样的。 但当我们把 CSS-P 用到 DIV 中去以后,我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它, 比如说移动它或改变它的一些性质等等。 <DIV ID="truck"> This is a truck </DIV> 给层次取什么名字是随意的,名字可以是任何英文字母和数字,但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。 Inline CSS:Inline 是最常用的方法。 <DIV ID="truck" STYLE="styles go here"> This is a truck . </DIV> External STYLE tag:使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。 <STYLE TYPE="text/css"> <!-- #truck {styles go here} --> </STYLE> <DIV ID="truck">This is a truck .</DIV>
position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的,而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。 left 相对于窗口左边的位置 top 相对于窗口上边的位置 width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。 height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。 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)