HTML中DIV和Span的区别揭秘

开发 前端
在网页设计中,我们经常用到DIV和Span,但是常常有个疑惑,这两个标签:DIV和Span的区别到底是什么?这里和大家分享一下。

本文和大家重点讨论一下Html中DIV和Span的区别,DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。

Html中DIV和Span的区别

在网页设计中,我们经常用到DIV和Span,但是常常有个疑惑,这两个标签:DIV和Span的区别到底是什么?

DIV是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过DIV来布局定位网页中的每个区块。

Span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<Span></Span>标记可以通过在Span上定义样式来设定其内容的样式。

DIV和 Span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。

◆两者最明显的区别在于DIV是块元素,而Span是行内元素。

所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:

[CSS在线]-示例代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <html> 
  5. <head> 
  6. <title>CSS在线-示例</title> 
  7. <style type="text/css"> 
  8. </style> 
  9. </head> 
  10. <body> 
  11. 测试<Span>紧跟前面的"测试"显示</Span><DIV>这里会另起一行显示</DIV> 
  12. </body> 
  13. </html> 
  14.  

 ◆块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化

[CSS在线]-示例代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.  
  3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <html> 
  5. <head> 
  6. <title>CSS在线-示例</title> 
  7. <style type="text/css"> 
  8. </style> 
  9. </head> 
  10. <body> 
  11. 测试<DIV style="display:inline">紧跟前面的"测试"显示</DIV><Span style="display:block">这里会另起一行显示</Span> 
  12. </body> 
  13. </html> 
  14.  

 因为DIV与Span元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。

一般而言:DIV一般用做渲染html 的容器,而Span指定内嵌文本容器。
 

【编辑推荐】

  1. 解析DIV+CSS网站设计的四大问题
  2. 解析DIV布局之四大属性用法
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 

 

责任编辑:佚名 来源: csscss.org
相关推荐

2010-08-30 10:32:38

SPANDIV

2010-09-07 13:58:28

SPANDIV

2010-09-13 11:25:56

DIV元素

2010-09-10 10:20:51

DIVSpan

2010-08-30 10:37:54

DIVSPAN

2010-08-30 12:59:47

DIVSPAN

2010-08-16 10:25:23

DIVSPAN

2011-05-12 16:45:02

HTML5divsection

2010-09-03 09:38:53

divspanCSS

2010-09-09 09:34:32

DIV

2010-09-15 13:21:32

DIV元素SPAN元素

2010-09-09 15:17:01

absoluterelativeCSS

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2011-06-01 11:23:15

HTML

2010-08-27 10:59:11

DIVTable

2010-08-27 10:49:38

DIVtable

2010-09-10 14:54:12

DIV排版

2010-08-16 14:18:49

DIV+CSS

2010-09-28 11:11:23

XML DOMHTML DOM

2010-09-02 13:03:38

CSS垂直居中
点赞
收藏

51CTO技术栈公众号