前端基础之DIV标签讲解！

先前写过一章：做网页先布局----切切豆腐块，本章将讲解div的使用！

简介

定义:

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法：

DIV标签应用于 Style Sheet（样式表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class、Style、title、ID 等属性。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的特定的元素。

实例

以下内容为例：

align="center"

可选值：center，left，right 。决定字、画、表格等居中、靠左或靠右的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。

CSS单元的位置和层次-div标签

我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用我们即将学到的CSS属性，你可以精确地设定元素的位置，还能将定位的元素叠放在彼此之上。

Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。

● 1．使用 DIV 标签 （div）

当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样：

This is a DIV tag .

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用是一样的。

但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。

This is a truck

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

Inline CSS：Inline 是最常用的方法。

This is a truck .

External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。

<STYLE TYPE="text/css">

<!--　#truck {styles go here}　-->

</STYLE>

This is a truck .

Cross-Browser CSS 性质：

我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。

• 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）

绝对定位：

定位属性将是网虫们打开幸福之门的钥匙：

H4 { ; left: 100px; top: 43px }

这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位：

绝对定位使你能精确地定位元素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的元素的位置相对于在文件中所分配的位置。例：

I { ; left: 40px; top: 10px }

相对定位的关键在于定位了的元素的位置是相对于它通常应在的位置进行定位。相对定位单元在普通的静态定位单元的行间出现，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。

● 3．定位单元的控制 （width、height、visiblility）

除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。

宽度：定位了的元素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定元素的宽度。

DIV { ; left: 200px; top: 40px; width: 150px }

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落最大水平尺寸限制在150象素。

宽度属性只适用于绝对定位的元素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体元素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV { ; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

可视性：利用CSS，你可以隐藏元素，使其在页面上看不见。这条属性对于定位了的和未定位的元素都适用。

H4 { visibility: hidden }

选项：

visible 使元素可以被看见

hidden 使元素被隐藏

inherit 指它将继承母体元素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。

div属性

color : #999999 文字颜色

font-family : 宋体文字字型

font-size: 10pt 文字大小

font-style:italic 文字斜体

font-variant:small-caps 小字体

letter-spacing: 1pt 文字间距

line-height: 200% 设定行高

font-weight:bold 文字粗体

vertical-align:sub 下标字

vertical-align:super 上标字

text-decoration:line-through 加删除线

text-decoration:overline 加顶线

text-decoration:underline 加底线

text-decoration:none 删除连接底线

text-transform: capitalize 首字大写

text-transform : uppercase 英文大写

text-transform : lowercase 英文写

text-align:right 文字*右对齐

text-align:left 文字*左对齐

text-align:center 文字居中对齐

这些是一些简单的文字效果，可以应用到css的页面中。

●背景

background-color:black 背景颜色

background-image : url(image/bg.gif) 背景图片

background-attachment : fixed 固定背景

background-repeat : repeat 重复排列-网页预设

background-repeat : no-repeat 不重复排列

background-repeat : repeat-x 在x轴重复排列

background-repeat : repeat-y 在y轴重复排列

background-position : 90% 90% 背景图片x与y轴的位置

●链接

A 所有超连接

A:link 超连接文字格式

A:visited 浏览过的连接文字格式

A:active 按下连接的格式

A:hover 鼠标移至连接

●边框

border-top : 1px solid black 上框

border-bottom : 1px solid #6699cc 下框

border-left : 1px solid #6699cc 左框

border-right : 1px solid #6699cc 右框

border: 1px solid #6699cc 四边框

●虚线

<TEXTAREA STYLE="border:1px dashed pink">

●实线

<TEXTAREA STYLE="border:1px solid pink">

设置div的高度与文字的行高一样就可以了，即 line-height 和 height 的数值是一样的就可以了，最后给div一个 over-flow: hidden ，让超出的部分隐藏。

div全局属性

<div> 标签支持HTML 的全局属性。

div事件属性

<div> 标签支持HTML 的事件属性

参考资料：HTML事件