深入剖析析DIV标签的使用

开发 前端
DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

本文向大家描述一下DIV标签的使用,DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。

DIV标签

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

  DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一段在 DIV 中的 HTML。

  DIV标签应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述,这处只介绍 一个属性设定。

使用 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 是最常用的方法。

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

  1.   <STYLE TYPE="text/css"> 
  2.   <!-- #truck {styles go here} --> 
  3.   </STYLE> 
  4.  

  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 的背景图象。

【编辑推荐】

  1. CSS HACK和浏览器兼容问题的解决方法
  2. CSS属性选择器语法详解
  3. CSS中DIV弹出层问题解决方案
  4. 七大CSS选择符用法详解
  5. 探究CSS高级语法中选择器分组和CSS继承用法
责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-08-16 11:19:31

DIV

2010-08-16 10:25:23

DIVSPAN

2010-08-16 13:39:18

DIV+CSS

2010-08-17 14:05:48

Div+CSS

2010-09-13 09:17:27

DIV页面

2010-09-09 16:36:36

DIV标签

2010-08-24 09:52:55

DIV标签

2010-09-01 09:29:51

CSS层叠CSS继承

2010-10-08 14:19:34

JavaScript split()

2009-12-01 17:00:49

PHP变量

2009-10-12 16:51:28

VB.NET使用Ora

2010-08-24 10:11:26

DIV标签

2010-08-24 10:01:05

DIV

2023-12-12 07:16:34

HTML标签开发

2010-06-03 13:08:51

2009-09-27 17:13:36

Hibernate V

2009-07-06 10:44:45

JSP charset

2011-06-03 13:48:18

JavaScript重构

2010-05-25 12:59:00

Subversion

2009-09-14 15:12:40

LINQ to XML
点赞
收藏

51CTO技术栈公众号