div vs span

原创 2007年09月25日 10:51:00

对于CSS布局而言,除了对id  class选择符的使用中会存在一定的问题外,就是span.

spandiv从语义上无法理解其真正用途,而在使用上spandiv几乎所有相同的属性.

如下代码所示

<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; spandisplay:inline;

在实际使用中 div对象的任务是呈现一个块状内容,如一大段文本,一个导航区域,一个页脚区域等显示块状的内容进行结构编码并进行样式设计。

而作为内联对象的span,用途是对行内元素进行结构编码 以方便 样式设计。span默认状态下就不会破坏行中元素的显示顺序,例如在一大段文本中,需要改变其中一段文本的颜色,可以使用span并进行样式设计,这将不会改边这一整段文本的显示方式。

divspan对象有着自己各自的用途与使用方法,虽然可以通过display属性的更改对它们的显示方式进行变化。但并不以为着二者的互换能够对页面带来好处,要根据实际场合使用对象来页面设计任务。

 

DIV与SPAN之间有什么区别.doc

  • 2011年12月09日 23:44
  • 153KB
  • 下载

网页设计中的Span和Div的区别

  • 2009年11月21日 20:00
  • 21KB
  • 下载

HTML中Div、span、label标签的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自...

HTML学习10-列表标签层标签 DIV标签/SPAN标签

HTML 块元素 大多数HTML元素被定义 为块级元素或内联元素。 块级元素在浏览器中显示时,通常会以新行来开始(和结束)。 例子:,,, HTML 内联元素 内联元素在显示时通常不会以新行开始。 例...

span元素与块级元素(div、p)位于同一行时的垂直居中问题

一个span元素和一个块级元素(div或者p,此文以p为例,当然对于div也适用)位于同一行时,有的时候会发现span元素内的文本偏下。...

HTML2 body中的属性、列表、表格、表单、Div和Span、框架标签

body中的属性 text属性(文本的颜色) 我很帅啊(随便玩的深水炸弹) link属性(连接的颜色)(如果把这个改成白色谁都看不见…很无语啊) alink属性(active 点击的时候连...
  • Aoutlaw
  • Aoutlaw
  • 2017年07月31日 18:16
  • 806

div与span区别及用法

div与span区别 div占用的位置是一行, span占用的是内容有多宽就占用多宽的空间距离,说明如下图 分析:从上图很容易知道“我是内容一;用的div”和“我是内容二;用的div”两个内...

HTML学习笔记(七)<div>与<span>

标签: 可定义文档中的分区或节。 标签可以把文档分割为独立的、不同的部分。是严格的组织工具,不使用任何格式与其关联。 是一个块级元素,浏览器通常会在 div 元素前后放置一个换行符。可以通过 ...

DIV与SPAN之间有什么区别

DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表(共同点)。 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。  详...

行内元素span和块级元素div的区别

行内元素span和块级元素div的区别
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div vs span
举报原因:
原因补充:

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