SPAN和DIV的区别

DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。

而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

下面以一个实例来说明这两个属性的区别。

　　代码：

　　<span>SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，<span>标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，<div>DIV也被用来在HTML文件中建立逻辑部分。但与<div>SPAN不同，<div>工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

　　效果：

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

------------------------------------------------------------------------------------------------------------------------------

DIV VS SPAN

作者：阿力 2006-11-22 20:07:18

对于css布局学习者而言，除了对id与class选择符的使用中会存在一定的问题之外，还有一个经常使大家感到混淆的概念就是xhtml标签中的id与class对象。对于xhtml中的大多数标签对象来说，都通过对象本身的单词表达了一定的用途，如p表示paragraph(段落)，strong表示加粗等，而span与div似乎从语义上无法理解其真正用途，而且在使用上span及div几乎所有相同的属性，div与span到底在xhtml中该如何使用呢?在了解这两个元素之前，我们先来看一下从w3c找到的两个元素的官方定义：

div generic language/style container

span generic language/style container

在W3c对div及span的简要描述中，我们看到了同样的说明是用于定义样式的容器。虽然W3c在对div及span的描述中都说明了相同的用法，而且非常准确，用于定义样式的容器，但实际上div与span在使用方式上有很大的区别，在这一点上我们通过实际显示的div与span的效果上就能看出，我们看一段xhtml及css代码：

<div id="d1">div容器1</div>

<div id="d2">div容器2</div>

<span id="s1>span容器1</span>

<span id="s1>span容器2</span>

css代码：

#d1,#d2,#s1,#s2 {

dorder:1px solid #000fff;

padding:10px;

}

我们在对4个对象进行了边框显示之外，预览一下实际显示的效果

div容器1

div容器2

span容器1 span容器2

从预览效果我们可以看到，在相同css样式的情况下，两个div对象之间出现了换行关系，而两个span对象则是同行左右关系。对于都是用于样式容器的div与span对象而言，正式由于这样的关系，使它们之间存在着使用上的差别。

div与span元素在显示上的不同，源于其默认显示模式(display)的不同。在前面我们曾了解过display属性的用法，用于改变元素的显示模式。

对于xhtml中的每一个对象而言，都拥有自己默认的显示方式，div对象的默认显示模式是display:block因为这样的默认模式，从而使div成为一个块状容器，其默认状态就将占据一整行的空间。而span对象的默认显示模式为display:inline;因此span将作为一个行间内联对象显示时以行内连接的方式进行显示。

正是由于两个对象不同的显示模式，因此在实际使用过程决定了两个对象的不同用途。div对象的任务是呈现一个块状内容，如一大段文本、一个导航区域、一个页脚区域等显示为块状的内容进行结构编码并进行样式设计。

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

span对象只是众多inline内联对象中的一种，而且是专门用于设计样式的一种内联对象，像strong对象也是一种内联对象，使用之后将对某段文本进行加粗显示，是一种自带属性的内联对象，而span对象在默认使用情况下均不改变任何其中文本的属性，这是xhtml留给设计者的一个空属性的内联对象，专门用于行内内容样式的自定义。

div所赋予的使命要比span重要的多，默认为块状显示模式的div对象在实际应用中担负页面大块布局及版式的所有工作，需要大量使用div进行组合或嵌套来实现我们网页的版式布局。

div与span对象有着自己各自的用途与使用方法，虽然我们可以通过display属性的更改对它们的显示方式进行变化，但并不意味着二者的互换能够对页面带来好处，我们所要做的是遵守xhtml留给我们的语言接口，使用最适合的对象来完成页面设计任务。

转自：这里