文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

DIV标签的用法

2024-04-02 19:55

关注

这篇文章主要讲解了“DIV标签的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV标签的用法”吧!

DIV标签简介

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

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

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

范例

以以下内容为例:

align="center"
可选值:center;left;right。决定字、画、表格等居中、靠左或靠右的作用和居中标记

一样,前者是由HTML3.0开始的标准,后者是通用己久的标示法。

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

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

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性,你可以精确地设定要素的位置,还能将定位的要素叠放在彼此之上,还有...还有......你自己慢慢看吧!
CascadingStyleSheets(CSS)是DHTML的基础。CSS用来设定你网页上的元素是如何展示的。CascadingStyleSheetsPositioning(CSS-P)是CSS的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词:CSS和CSS-P。下面看一下DIV标签的使用。

1.使用DIV标签(div)

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

◆ThisisaDIVtag.

如果单独使用DIV而不加任何CSS-P,那么它在网页中的效果和使用是一样的。
但当我们把CSS-P用到DIV中去以后,我么就可以严格设定它的位置。首先我们需要给这个可以被CSS-P控制的DIV一个ID或说是它的名字。比如说我们给下面这个DIV的名字是truck。给名字的目的是我们以后可用JavaScript来控制它,比如说移动它或改变它的一些性质等等。

◆Thisisatruck

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

InlineCSS:Inline是最常用的方法。

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


Thisisatruck.

Cross-BrowserCSS性质:
我们这个课程的主要目的是让你写出的网页在NS4和IE4上都能工作,所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由W3C给出的标准。
position 决定DIVtag是如何放置的。“relative”意思是DIV的位置是相对于其他tag的,而“absolute”是说DIVtag的位置是相对于它所在的窗口。
left 相对于窗口左边的位置
top 相对于窗口上边的位置
width DIVtag的宽度。所有在DIV里的文字或html都在里面。
height DIVtag的高度。这个性质很少用除非你想Clip层次。

◆clip 给出layer的clipping(可看的见的)部分。Clip可使得DIV显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隐蔽或展现DIV根据它的值“visible”,“hidden”,“inherit”。
z-index DIVtag的立体位置。值越大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规则让浏览器将

的起始位置精确地定在距离浏览器左边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象素。
宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位,或使用比例值设定宽度,比例值指相对于母体要素的比例。IE4中,这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

◆高度:理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:
DIV{;left:200px;top:40px;height:150px}
这里我用了“理论上讲”,因为有些浏览器不支持高度属性。
可视性:利用CSS,你可以隐藏要素,使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。
H4{visibility:hidden}

◆选项:

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


感谢各位的阅读,以上就是“DIV标签的用法”的内容了,经过本文的学习后,相信大家对DIV标签的用法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯