探究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是行内元素。

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

示例代码

  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属性值可以互相转化

示例代码

  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>
  12. <Span style="display:block">这里会另起一行显示  
  13. </Span> 
  14. </body> 
  15. </html> 
  16.  

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

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

【编辑推荐】

  1. CSS中DIV标签实现定位单元的控制
  2. JavaScript动态创建div属性和样式
  3. CSS中border和clear两大属性用法揭秘
  4. 实现DIV居中布局三种途径
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

 

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

2010-08-17 09:41:22

DIVSpan

2010-08-30 10:32:38

SPANDIV

2018-01-05 09:43:54

ROMRAM存储

2020-08-18 16:10:44

ManjaroArch LinuxLinux

2018-05-31 08:17:53

RAIDNAS重叠

2021-12-02 14:10:34

ChromeChromium浏览器

2011-12-21 09:01:28

云计算编程开发

2023-09-01 07:38:45

ArrayListArrayst实线类

2015-10-22 10:23:34

程序员工程师不同

2020-09-25 18:10:06

Python 开发编程语言

2010-09-03 09:38:53

divspanCSS

2010-09-07 13:58:28

SPANDIV

2010-09-13 11:25:56

DIV元素

2010-08-30 10:58:19

DIV CSSfloat

2010-08-30 08:41:43

DIV显示DIV隐藏

2024-01-23 09:51:11

编程工具

2023-12-12 11:45:54

云服务数据科学家云计算

2016-12-22 16:21:37

Windows微软盗版系统

2017-05-31 14:52:53

虚拟机Docker容器

2021-07-02 15:28:55

LTE5G网络
点赞
收藏

51CTO技术栈公众号