SPAN元素和DIV元素的区别

开发 前端
这里向大家重点描述一下SPAN元素和DIV元素的区别,DIV是块元素,SPAN是内嵌元素。块元素相称于内嵌元素在前后各加一个<br>换行。

SPAN元素和DIV元素有什么区别?最显明的区别是:DIV是块元素,SPAN是内嵌元素。块元素相称于内嵌元素在前后各加一个<br>换行。实在,块元素和行内元素也不是原封不动的,只需给块元素定义display:inline,块元素就成了内嵌元素,同样的,给内嵌元素定义了display:block就成了块元素了。

<div>和<span>的区别

span元素:

容许网页制造者给出一个样式表,但无须加正在HTML元素之上,也便是道span是独立于HTML元荤的.span在样式表做是做为一个本识符使用,而且也接收styleclass和ID属性如<spanclass="xx">.....</span>
span是一个内联元素,它纯洁是为了利用样式外表成立的。

DIV元素:

基础上取span类似,或许道具有SPAN一切的功用,此外还具有SPAN不及的特点.DIV是一个块,也就是所谓的"容器",它具有本人独立的段降,独立的题目,独立的表格,就如<html>.....</html>一样包含了一切。

代码示例:

  1. <style> 
  2. div,span{border:1pxsolid#000;margin:2}  
  3. </style> 
  4. <div>div1</div><div>div2</div> 
  5. <span>span1</span><span>span2</span> 
  6. <br> 
  7. <divstyledivstyle="display:inline">div3</div> 
  8. <divstyledivstyle="display:inline">div4</div> 
  9. <spanstylespanstyle="display:block">span3</span> 
  10. <spanstylespanstyle="display:block">span4</span> 
  11.  

 技能:

有些朋友会说DIV是层标签,实在HTML里是没有层这个说法的,只不外是为了易于懂得,Dreamweaver里才这样写的,每个对于象都可以成为“层”,只须要给对象定义position属性(值为absolute或者relavite)。例如,要让图片成为“层”,可以这样写代码:
 

  1.  
  2.  
  3. <imgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrcimgsrc="demo.gif" 
  4. style="posibion:absolute;left:20;top:20">      
  5.    

 

特殊提醒

原例代码运转后果如图2.1.6.3所示,为了更能阐明答题,那里给块元素和内嵌元素皆加了1像素阔的玄色真线边框,自图中能够望到,DIV默觉得块元素,定义display属性值为inline后以内嵌元素显示,而SPAN默以为内嵌元素,定义display属性值为block后则以块元素显示。

【编辑推荐】

  1. Firefox浏览器里DIV重叠问题解决
  2. jQuery代码轻松实现DIV弹出效果
  3. CSS中DIV弹出层问题解决方案
  4. 七大CSS选择符用法详解
  5. 探究CSS高级语法中选择器分组和CSS继承用法

 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-09-13 11:25:56

DIV元素

2010-08-30 12:59:47

DIVSPAN

2010-09-15 13:21:32

DIV元素SPAN元素

2010-08-30 10:32:38

SPANDIV

2010-08-17 09:41:22

DIVSpan

2010-09-08 17:11:29

CSS块元素CSS内联元素

2010-08-30 10:37:54

DIVSPAN

2010-08-16 10:25:23

DIVSPAN

2010-09-03 09:38:53

divspanCSS

2010-09-10 10:20:51

DIVSpan

2010-08-16 11:33:16

DIV定位

2010-08-26 17:02:35

DIV定位

2021-07-29 10:00:24

Arrays工具类元素

2010-08-31 10:11:50

divuldl

2010-08-27 10:59:11

DIVTable

2010-08-27 10:49:38

DIVtable

2021-12-13 06:56:45

Comparable元素排序

2021-01-18 07:52:08

Dom节点Element

2023-12-30 08:08:11

元素HTML块级元素

2010-09-10 14:54:12

DIV排版
点赞
收藏

51CTO技术栈公众号