定义

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

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记

，那么该标签的作用会变得更加有效。注释：

是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。提示：请使用

元素来组合块级元素，这样就可以使用样式对它们进行格式化。

DIV标签

标签定义HTML文档中的分隔（DIVision）或部分（section）。

标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。

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

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

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

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

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

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

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-indexDIV tag的立体位置。值越大DIV的位置越高。

background-color DIV背景的颜色。

layer-background-color Netscape的DIV背景颜色。

background-image DIV的背景图像。

layer-background-image Netscape的DIV的背景图像。

HTML

标签

用法

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的class或id应用额外的样式。

不必为每一个

都加上类或id，虽然这样做也有一定的好处。

可以对同一个

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

浏览器支持

所有主流浏览器都支持

属性

标准属性

id,class,title,style,dir,lang,xml:lang如需完整的描述，请访问标准属性。

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:ur（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四边框

虚线

实线

可选的属性

属性：align

值：left right center justify

描述：不赞成使用。请使用样式取而代之。规定div元素中的内容的对齐方式。

DTD：TF

定位单元的控制

（width、height、visiblility）

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

宽度

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

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

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

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

高度

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

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

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

可视性

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

H4{visibility:hidden}

选项

visible使要素可以被看见

hidden使要素被隐藏

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

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

当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图像周围，那么，其显示效果将是文字包围着一块空白区域。

这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图像只在鼠标滑过时才显示。

单元层次

（z-index）

特性z-index用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负z-index值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为-1的单元在值为-2的单元的上面）。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图像设定z-index。（对于Communicator，最好将标签包在[font]或标签内，然后将z-index应用到[font]或。）

剪辑绝对定位单元

（clip）

绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如Netscape Communivator 4和Internet Explorer4都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实现文本“划入”和图像渐显等显示特征。

在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：

clip:rect(top,right.bottom,left) ;

其中top、right、bottom和left分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom和left的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字auto。取值为auto意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。

控制单元溢出

（overflow）

固定绝对或相对定位单元的width和height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用overflow来指定浏览器如何处理溢出：值none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值clip要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值scroll也同样要求浏览器在单元底部和右边剪辑单元内容（同clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。

布局优势

一、精简代码，减少重构难度

网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

二、网页访问速度

使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。

三、SEO优化

采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

四、浏览器兼容性

若使用table布局网页，在使用不同浏览器情况下会发生错位，而div+css则不会，无论什么浏览器，网页都不会出现变形情况。

最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。

div[汇编语言中除法指令] - 差异

在HTML4.01中，div元素的"align"属性不被赞成使用。

在XHTML1.0 Strict DTD中，div元素的"align"属性不被支持。

实例

文档中的一个部分会显示为绿色：

This is a header

This is a paragraph.

例子解释

正如您看到的，上面这段HTML模拟了新闻网站的结构。其中的每个div把每条新闻的标题和摘要组合在一起，也就是说，div为文档添加了额外的结构。同时，由于这些div属于同一类元素，所以可以使用class="news"对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对div进行格式化，可谓一举两得。

提示：如需更深入地学习class和id的用法，请阅《W3school 的结构化标记》这一章中div、id和其他帮手这一节。