DIV与SPAN的区别

最新推荐文章于 2024-06-18 08:02:36 发布

season1437

最新推荐文章于 2024-06-18 08:02:36 发布

阅读量658

点赞数 1

分类专栏： web技术文章标签： div dreamweaver xhtml class html float

web技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

div和span是什么意思?
相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

当然了，div和span的具体意义和区别脱离开实践是很难说清楚的。下面我们就来看看div和span的应用实例。

块级标签<div>
实例页面。源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
<p>我在div内，属性为box。</p>
</div>
</body>
</html>
在上面的例子中，我们首先在页面内放了一个class为box的div，而在它的内部又放了一个class为boxhead的div。为了便与观察，我们为div添加了背景颜色。下面我们来看看对这两个div定义的前面教程中没有的属性：

对box的属性：width: 30%;表示这个box div占页面宽度的30%，而浮动属性float: left; 则表示box div浮动在页面的左侧。

对boxhead的属性：width: 100%;由于boxhead div在box div之内，那么这里的100%是指box的宽度。

行级标签<span>(行内标签)
实例页面。本实例在上面实例的基础之上，只修改一段文本的颜色。修改如下代码：

将第一个“<p>我在div内，属性为box。</p>”修改为

<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>

以上只是关于div和span的简单介绍，而实际应用中div和span的用法是非常灵活的。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/cesium/archive/2007/03/28/1543999.aspx

最明显的区别是：DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义 display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。

具体步骤：
代码示例：

<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>

技巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为“ 层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：

<img src="demo.gif" style="posibion:absolute;left:20;top:20">

简单理解，DIV是放在外部使用的，而span很少单独使用，一般都是放在div或者table里面使用。所以叫行内元素！！！！

最简单的理解.
span 不换行
div 换行
为什么呢
因为div是块元素
而span是跟<a></a>一样不影响块的.

season1437

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DIV与SPAN的区别

div和span是什么意思?相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到标签，你知道里面是标题，当你看到标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而span是行级元素(行
复制链接

扫一扫