CSS代码结构初探:再谈div和span!

原创 2007年10月08日 10:01:00
  我们在规划网页的结构时通常会用到div。我们正常都认为div是一个没有语意的标签,它的作用是用来分割文档的不同区域。但我们也发现,有些人认为div是有语意的。只不过它不象h1或ul等那些标签的语意那么明确而已,div的语意是division,英文的意思是区分、分开、部分。即用它来分割文档的不当部分。我们在正常编码中,会给div 分配一个id名称,这样也使得文档具有了结构的意义,例如:id="main"、id="sider"等等。关于id的知识我们在前面的文章《如何为id 及class类命名? 》http://www.fun52.com/article.asp?id=403中已经讨论过了,希望大家都能掌握相关知识。
  我们试图将文档的标注标签尽量的减化。只有在不得已,实在没有可用的HTML元素进行分割的时候我们再使用div的方式。这是一种简洁的方式,但有些人也认为这样使得文档的结构化出现障碍,主张需要div进行分割。我们看下面的例子:
这是一:
<div id="nav">
<ul>
<li><a href="http://www.fun52.com/">Div+CSS教程</a></li>
<li><a href="http://www.fun52.com/">CSS布局实例</a></li>
.....
</ul>
</div>
这是二:
<ul id="nav">
<li><a href="http://www.fun52.com/">Div+CSS教程</a></li>
<li><a href="http://www.fun52.com/">CSS布局实例</a></li>
.....
</ul>
  有人主张用第一种方法,结构明晰。添加了外围的div标签,释意这一段代码是nav区域。
  也有人主张第二种方法,去掉不必要的div标签,简化代码,而且能达到同样的效果。
  这是一种争论,事实上类似于这样的争论还有很多。我们不必太较真了。因为他们都有自己的道理。我们只需要理解他们的主张是什么,编码的思想是什么,就学习到知识了。fun52.com的MrJin更倾向于第二种。因为他已经满足需要了。这不一定是正确的。这只是解决问题的方法之一。
  除了上面所说的两种情况之外,还有一种情况与上面的相反,有些人对div的依赖太强烈了,以至于编码思想是用div构建与传统table类似的结构。这样是绝不可取的,这就与Web标准的思想背道而驰了,使代码烦杂不便于理解,缺少语义,结构不明朗。
  div是block块元素,可以规划文档的不同功能区域,当然,你可以运用display:inline,使它变成内联形式。但我们更常用的还是span。这是对内联无素进行标识的标签。看下面的代码。
<div id="about52css">
<h1>Div+CSS教程 www.fun52.com</h1>
<p>fun52.com是一个非常<span>专业的CSS站点</span></p>
<p>fun52.com的<span>Div+CSS</span>教程栏目有丰富的教程</p>
</div>
  这段代码中的“专业的CSS站点”“Div+CSS”都被嵌套在了span元素之内。我们可以对某一些地方应用这些标记以应用不同的样式。我们可以将上面的两个span内嵌的内容显示为不同于普通段落的文字色彩。
  总之,我们应该尽量的简化我们的代码,扔掉那些不必要的标签标记,不过你也不要太过了保守,在实际操作中有这样的精简思维就可以了。现实的情况让我们不得不添加一些标记来让CSS准确的找到目标。因为CSS的功能还不够强大,相信未来一定会有更好的方法解决问题。

CSS中的div和span标签

今天学习了关于CSS中的div和span标签,下面来通过例子简单的介绍一下这几个标签怎么使用。 part1: div标签: 一般用于配合css完成网页的基本布局 span标签:一般用于配合css...
  • shwanglp
  • shwanglp
  • 2016年12月04日 16:45
  • 615

div中img,span垂直居中的问题

html> head> style> #test *{vertical-align:middle;} style> body> div id="test"> img src="htt...
  • limlimlim
  • limlimlim
  • 2013年10月30日 16:30
  • 13452

学习笔记 div span 垂直居中 + 水平居中

学习笔记:div 内部span垂直居中 5G 0.00%
  • Vincent_Field
  • Vincent_Field
  • 2017年12月07日 18:59
  • 107

CSS 后代选择器,结合<div><span>标签

style p span,h1 span,.test ul li{color:red;} /* 后代选择器,针对标签中的标签,标签中的标签,类名class="test"的标...
  • houyanhua1
  • houyanhua1
  • 2017年10月28日 20:57
  • 221

CSS学习笔记--Div+Css布局(div+span以及盒模型)

1.DIV与SPAN 1.1介绍 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 ...
  • Evan_Leung
  • Evan_Leung
  • 2016年07月31日 01:09
  • 1493

DIV和SPAN之间的切换

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用...
  • yz7074998
  • yz7074998
  • 2015年07月22日 17:16
  • 1079

解决div与span等inline元素同行后高度不一致问题

这里场景是有一个div使用float,本来前面的span由于后面div的浮动被挤到了后面。这是因为浮动破坏了div的inline-box导致的。但是导致了,这两个元素的高度不一致的问题,并且无法用ma...
  • little_newBee
  • little_newBee
  • 2017年05月19日 23:15
  • 848

span div p 三个标签区别

span和div的不同之处在于span是内联的,用在一小块的内联HTML中,前后不断行. div(想想division是什么意思)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码...
  • m1654399928
  • m1654399928
  • 2013年05月30日 09:34
  • 1608

CSS 让div内的span在一行显示

让div内的span在一行显示只需把span的style.display设置成inline-block就行了.div 是block元素,默认自动换行,须转换成span的inline元素或者加displ...
  • xiangsuixinsheng
  • xiangsuixinsheng
  • 2011年07月18日 12:31
  • 15518

div,li,span中加入span右对齐方法

我们常常在做网站的时候会div,li,span中加入span右对齐,例如:文章列表中在我们会加入时间让它右对齐,以增加网页的可读性,如下代码: html如下:     span右对齐,换行显示...
  • orichisonic
  • orichisonic
  • 2015年10月20日 14:25
  • 7681
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS代码结构初探:再谈div和span!
举报原因:
原因补充:

(最多只允许输入30个字)