对于CSS布局而言,除了对id 与class选择符的使用中会存在一定的问题外,就是span.
span与div从语义上无法理解其真正用途,而在使用上span及div几乎所有相同的属性.
如下代码所示
<div id="d1">div1</div> <div id="d2">div2</div> <br /> <span id="s1">span1</span> <span id="s2">span2</span>
CSS代码: #d1,#d2,#s1,#s2{ border:1px solid #000FFF; padding:10px; } |
显示效果如下
从上面效果可以看到,两个div之间出现了换行,而span是并行。
对于XHTML的每一个对象而言,都拥有自己默认的显示模式,div对象的默认显示模式display:block; 而span是display:inline;
在实际使用中 div对象的任务是呈现一个块状内容,如一大段文本,一个导航区域,一个页脚区域等显示块状的内容进行结构编码并进行样式设计。
而作为内联对象的span,用途是对行内元素进行结构编码 以方便 样式设计。span默认状态下就不会破坏行中元素的显示顺序,例如在一大段文本中,需要改变其中一段文本的颜色,可以使用span并进行样式设计,这将不会改边这一整段文本的显示方式。
div与span对象有着自己各自的用途与使用方法,虽然可以通过display属性的更改对它们的显示方式进行变化。但并不以为着二者的互换能够对页面带来好处,要根据实际场合使用对象来页面设计任务。