此内容全部粘别人的，感觉不错，粘来收藏一下：
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。
下面以一个实例来说明这两个属性的区别。
代码:
SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。
还有一个标识符具有类似的功能，
< SPAN>< /SPAN>标记定义了HTML文档中的一个行内间隔，可以给这个间隔赋一个id属性，给整个间隔一个统一的颜色、字体、边框、背景等属性，使整个间隔响应相同的事件，可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的某一项。多个< SPAN>< /SPAN>标记可以放在同一行内，组成下拉式菜单的菜单条。
< DIV>< /DIV>标记定义了HTML文档中的一个矩形区域，可以给这个区域赋一个id，给整个区域一个统一的颜色、字体、边框、背景等属性，使整个区域响应相同的事件，通过设置< DIV>< /DIV>标记的style.display属性为block或none可以在运行时动态的显示或隐藏这个区域，可以用这个标记制作树形结构目录的子目录、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。通过程序代码设置< DIV>< /DIV>标记的style.posLeft、style.posTop、style.posWidth、style.posHeight属性，可以在运行时动态的改变< DIV>< /DIV>区域的位置和大小，用来设计滚动条。
列表框和下拉列表框
在一个< DIV>< /DIV>标记中放置一组< SPAN>< /SPAN>标记，不同的< SPAN>< /SPAN>标记间用< BR>标记换行，形成一个列表框。给< SPAN>< /SPAN>标记添加事件，使其能根据鼠标的位置改变颜色。在< SPAN>< /SPAN>标记的onclick事件中，完成指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中，以便检索所选择的项目。
在网页中放置一个< SPAN>< /SPAN>标记作为下拉列表框。
在下拉列表框的右边放置另外一个< SPAN>< /SPAN>标记，设置这个< SPAN>< /SPAN>标记的背景图片，形成下拉箭头。在下拉列表框的下边放置一个< DIV>< /DIV>标记制作的列表框作为下拉列表，设置下拉列表的style.display属性为none，然后根据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序，将所选择的项目文本放在下拉列表框中。
弹出式菜单
由于网页不能响应鼠标右键，因此，在网页中只能用鼠标左键的click事件实现弹出式菜单。按照列表框的设计方法设计弹出式菜单，将弹出式菜单< DIV>< /DIV>标记的style.display属性设置为none。在document的click事件中，通过设置< DIV>< /DIV>标记的style.posLeft和style.posTop属性，将弹出式菜单移动到光标所在的位置，将< DIV>< /DIV>标记的style.display属性设置为block，显示菜单。当鼠标离开菜单时，隐藏菜单。
下拉式菜单
用一个< SPAN>< /SPAN>标记制作菜单条，菜单条< SPAN>< /SPAN>标记中嵌
套几个< SPAN>< /SPAN>标记作为子菜单。按照弹出式菜单的设计方法，分别为每一个子菜单设计下拉菜单。通过响应子菜单的鼠标事件，显示或隐藏下拉式菜单。
为了方便程序移植，可以将菜单数据放在数组里，在程序中通过document对象的write方法动态生成菜单。
滚动条
在网页中放置一个< DIV>< /DIV>标记作为滚动条的背景，设置背景的颜色和图片，背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个< DIV>< /DIV>标记作为滚动条的左右箭头，设置左右箭头的背景颜色和背景图片。在背景区域的中间放置一个< DIV>< /DIV>标记作为滚动条的滑块，设置滑块的背景颜色和背景图片，背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事件< DIV>< /DIV>标记用来响应鼠标事件，不设置这个标记的背景颜色和背景图片属性，使其透明。为了能正确的看到滚动条的各个部分并使事件< DIV>< /DIV>区域能截获鼠标事件，应使事件< DIV>< /DIV>标记的Z-INDEX属性最大，背景< DIV>< /DIV>标记的Z-INDEX属性最小。在事件< DIV>< /DIV>标记的鼠标事件中，通过比较鼠标window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。
在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条各个部件的大小和位置。在网页中放置一个< DIV>< /DIV>标记，将网页中需要滚动的部分都放在这个< DIV>< /DIV>区域中。在滚动条的滚动事件中通过改变这个标记的style.posLeft和style.posTop属性，实现网页的滚动。
用以上方法实现的滚动条，可以设计成任意的大小和颜色，放置在网页的任意位置，选择任意的图片作为箭头和滑块的背景，极大的满足艺术化设计网页的需求。
本文利用了HTML标记< SPAN>< /SPAN>和< DIV>< /DIV>的风格属性，在网页中实现了菜单、树形结构目录和自定义的滚动条、列表框、下拉列表框。到目前为止，只有运行在Windows平台下的浏览器Internet Explore支持这种风格属性，实际应用中应当判断客户浏览器类型，以便提供不同的网页。
对于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个对象进行了边框显示之外，预览一下实际显示的效果
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留给我们的语言接口，使用最适合的对象来完成页面设计任务。
扫一扫
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
