标准布局中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属性(值为absolute或relavite)。例如,要让图片成为“层”,可以这样写代码:
<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了? 这么理解对吧
- 管理员回复:可以这么理解
推荐文章
热门文章
最新评论文章
推荐专题
在线交流QQ群
- 106310407(开)
- 55427134(开)
- 2993401(开)
- 30235673(开)
- 33424604(开)
- 2993401(开)
- 161512108(开)
- 161510519(开)
- 158375021(开)
- 155858414(开)
- 143309878(开)
- 16373807(开)
- 129098721(开)
- 123473199(开)
- 146991009(开)
- 135792800(开)
