当前位置:首页 > DIV+CSS教程 > 正文

标准布局中DIV元素和SPAN元素的区别和应用

作者:××× 来源:aa25.cn 【 】 浏览: 添加日期:2008-11-29 我要评论(6)     

首先讲两个概念,一个是行内元素,一个是块级元素。行内元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作用;而块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

两者最明显的区别是:DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。

具体步骤

代码示例:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行


技巧:有些朋友会说DIV是层标签,其实HTML里是没有层这个说法的,只不过是为了易于理解,Dreamweaver里才这样写的,每个对象都可以成为,只需要给对象定义position属性(值为absoluterelavite)。例如,要让图片成为,可以这样写代码:

<img src="demo.gif" style="posibion:absolute;left:20px;top:20px">

特别提示
本例代码运行效果如图所示,为了更能说明问题,这里给块元素和内嵌元素都加了1像素宽的黑色实线边框,从图中可以看到,DIV默认为块元素,定义display属性值为inline后以内嵌元素显示,而SPAN默认为内嵌元素,定义display属性值为block后则以块元素显示。

SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: span div 行内元素 块级元素

更多评论(6)..会员评论

cssstudy(222.83.*.*) 发表于:2010-07-01 10:53:35
谢谢站长的回答,让我知道了解决的办法,今天尝试时把DIV的下边框显示出来,结果发现浮动居然把SPAN浮到DIV下面去了。真是个奇怪的BUG,不过幸好有站长指点,最起码以后碰到这个问题可以自己解决了。再次感谢站长的热心解答!
管理员回复:不客气,欢迎常来
cssstudy(113.13.*.*) 发表于:2010-06-28 21:27:00
谢谢站长的热心解答,把浮动的span放到前面在IEtest里的IE6和IE7均测试通过,可以解决问题,但却不明白为什么要这么做,并且这样反过来写感觉顺序变反,有点怪。除此之外没其他办法解决吗?站长能不能把这个BUG详细说说。再次感谢站长的热心解答。
管理员回复:因为是向右浮动,所以内容得放到前边。有点类似于word的文本绕图。如果想放到后边,需要把前边的内容向左浮动,这样也可以解决。
cssstudy(222.83.*.*) 发表于:2010-06-26 20:26:31
谢谢站长的关注。 div里面含有两个span,前面一个是为了在DIV里的文字中设置某些字高亮显示,后面一个是为了使其在右边显示而采用右浮动,为了区分两个span后面一个采用定义CSS类的办法。具体情况如下: 前面的span的CSS定义为#div span,只有一句设置字体颜色。 后面的span的CSS定义为#div .right表示为右边显示,有三句定义,一句是右浮动,一句是高度,一句是行高,目的是为了定义span垂直高度居中显示。 另外后面的span里面含有一个链接标签。
管理员回复:你把第二个span放到最前边看下
cssstudy(113.13.*.*) 发表于:2010-06-26 11:19:57
我在一个DIV里加了一个SPAN右浮动显示时发现与左边不对齐,即显示不在同一水平线上,具体显示情况是右浮动的SPAN向下沉了,这个情况只在IE6和IE7出现,而IE8和火狐显示正常,在同一水平线上。估计是IE6和IE7对标准支持不好导致,但却不知道是由于什么样的BUG导致这种情况出现,又应该如何解决,如果可以麻烦站长帮我解决一下,谢谢!
管理员回复:你的span是加在了前边还是加在了后边
dnss(221.10.*.*) 发表于:2010-04-16 10:52:37
说的非常好,顺便指出第一段有错别字:“行业元素“
管理员回复:已更正,谢谢提醒
lijybhj(221.229.*.*) 发表于:2010-04-08 15:23:33
也就是说div设置为内联元素就相当于span了? 这么理解对吧
管理员回复:可以这么理解

出差旅游免费预订酒店

【视频教程】新手常见问题