div 和 span 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。div与span两者最显著的区别在于div是块元素可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而span是行内(即内嵌)元素,span 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用span。如果不对div元素定义任何CSS属性,其显示效果等于在前后各加一个<br>换行。
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。下面给出一行代码,方便大家能更形象的理解div与span的区别。 代码如下:
测试<span>紧跟前面的"测试"显示</span><div>从这里开始会另起一行显示</div>
块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成内嵌元素,同样地,给内嵌元素定义了display:block就成块元素了。如以下代码:
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
行内样式定义<span>元素的基本语法:<span 属性=“属性值></span>
<span>元素的首尾标记必须同时成对出现,且<span>元素允许多重嵌套,也就是说,一个<span>元素中可以嵌套任意多个<span>元素。
块级样式定义<div>元素的基本语法:<div 属性=“属性值”></div>
<div>元素的首尾标记必须同时成对出现,且<div>元素允许多重嵌套,也就是说,一个<div>元素中可以嵌套任意多个<div>元素。
div与span相区别的实例:
我们建立三个div,并在每个div里面插入一张图片;建立三个span,也在每个span里面插入一张图片。代码如下:
<p>div标记不同行:</p>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<div><img src="http://www.ittribalwo.com/images/logo.gif"></div>
<p>span标记同一行:</p>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>
<span><img src="http://www.ittribalwo.com/images/logo.gif"></span>
从上面的例子我们可以看出,结果就是div排列的图片,是每张占一行。而span排列的图片,三张都在同一行。div默认的是一个行外标记,一个块对象,默认情况下,一个div是占一行,而span是一个行内标记,一个内联的对象,默认情况下,span嵌套在任何页面中,在不超过父模块边界的情况下,是在同一行显示的。
div 和span 的区别
div 一个div 独占一行
span 紧接其后 不独占 和前后内容相处紧凑