网页设计中,有个困惑,就是分不清什么地方会用到DIV什么情况用Span,标签DIV和Span的区别到底是什么?分享如下。
DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。
大家讨论一下Html中DIV和Span的区别,如下所述:
DIV是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。在网页中我们一般通过DIV来布局定位网页中的每个区块。
Span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<Span></Span>标记可以通过在Span上定义样式来设定其内容的样式。
DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。
两者最明显的区别在于DIV是块元素,而Span是行内元素。
所谓块元素,是另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:
示例代码
 
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
  <head> 
        <title>CSS在线-示例</title>
        <style type="text/css"> </style> 
  </head>
  <body> 
  测试<Span>紧跟前面的"测试"显示</Span>
      <DIV>这里会另起一行显示</DIV> 
  </body>  
 </html>
 不过,块元素和行内元素也不是一成不变的,可以通过定义CSS的display属性值可以互相转化
示例代码
 
复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
          <title>CSS在线-示例</title>
          <style type="text/css">
   </style> 
     </head> 
     <body> 
         测试
  <DIV style="display:inline">紧跟前面的"测试"显示</DIV> 
  <Span style="display:block">这里会另起一行显示</Span> 
</body
</html>
由于DIV与Span元素的特殊性,一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,再就是两者间的相互转化。
DIV一般用做渲染html 的容器,而Span指定内嵌文本容器。