Div和Span的区别

DIV元素和SPAN元素的区别

  你对标准布局中DIV元素和SPAN元素的区别和应用是否了解,这里和大家分享一下,两者最明显的区别是:DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。

  本文和大家重点讨论一下标准布局中DIV元素和SPAN元素的区别和应用,首先讲两个概念,SPAN元素是行内元素,DIV元素是块级元素,DIV元素即块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

标准布局中DIV元素和SPAN元素的区别和应用

  首先讲两个概念,SPAN元素是行内元素,DIV元素是块级元素。行内元素是指该元素标记的内容不不会对现在的结构造成影响,属于应用样式,辅助应用样式表等作用;而DIV元素即块级元素为一个块状,单独占据一行,相当于在一个该元素前后各加一个换行。

  两者最明显的区别是:DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。DIV元素即块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。

代码示例:

  1. <style>
  2. div,span{border:1pxsolid#000;margin:2px;}
  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>

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

  1. <imgsrcimgsrc="demo.gif"style="posibion:absolute;
  2. left:20px;top:20px">

特别提示

为了更能说明问题,这里给块元素和内嵌元素都加了1像素宽的黑色实线边框,DIV元素默认为块元素,定义display属性值为inline后以内嵌元素显示,而SPAN默认为内嵌元素,定义display属性值为block后则以块元素显示。

SPAN元素标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。

文章出处:标准之路(http://www.aa25.cn/div_css/545.shtml)

时间: 2024-11-02 12:21:51

Div和Span的区别的相关文章

div与span的区别

DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录 特点与区别 小结 知识扩展 案例效果演示 一.DIV与SPAN的区别与特点   -   TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍div与span区别div占用的位置是

html css,div与span的区别

div与span的区别 1.div是块级元素,它不论大小默认占一行,而且可以设置宽高以及外边距2span是行内元素,它占它自身大小的位置,而且不能设置宽高以及边距3.同时div也可以变为span (display:inline),这样div将变为行内元素4.span也可以变为div(display:block),这样span将变为块级元素,默认占一行,而且可以设置宽高5.同时,两者要想实现既可以设置宽高,边距,又可以不占一行,则display:inline-block

div与span的区别:

div标签属于块级元素,span标签属于行内元素,使用对比效果如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>111</title> 6 <style> 7 div{ 8 background-color: #CC99CC; 9 color: blue; 10 wi

div与span区别及用法

DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候,遇到第一个问题是div与span有什么区别,什么时候用div,什么时候用span标签. 目录 特点与区别 小结 知识扩展 案例效果演示 一.DIV与SPAN的区别与特点   -   TOP 以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍div与span区别div占用的位置是

Html div和span详解

div和span的区别 div: div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. Span: span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式. div和 span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表. 比如:代码: <html> <head&

Div与Span

你对DIV与SPAN区别及用法是否了解,这里和大家分享一下,在DIV+CSS开发的时候在html网页制作,特别是标签运用中DIV和span的区别及用法都是非常重要的内容. DIV与SPAN区别及用法 在DIV+CSS开发的时候在html网页制作,特别是标签运用中DIV和span的区别及用法.新手在使用web标准(DIVCSS)开发网页的时候,遇到第一个问题是DIV与span有什么区别,什么时候用DIV,什么时候用span标签. 以下是在没有对开发网页页面设置CSS样式时候情况下,系统默认情况下的

HTML中Div、span、label标签的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还好,但是小的地方到底是用div还是用span仍然让人迷惑.其实恰恰是<Microsoft MSDN Library>里面的定义让人豁然开朗. div:指定渲染HTML的容器 span:指定内嵌文本容器 通俗地讲就是如果里面还有其他标签的时候就用

论HTML的div、span和label的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的"章法",觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还 好,但是小的地方到底是用div还是用span仍然让人迷惑.其实恰恰是<Microsoft MSDN Library> 里面的定义让人豁然开朗. div:指定渲染HTML的容器 span:指定内嵌文本容器 通俗地讲就是如果里

课时90.div和span(掌握)

为什么在这里讲解div和span呢,而不在html中讲解呢? 因为在我们的开发中div和span一般是配合css来使用的,来完成一定的效果,来设置一些属性,在前面我们没有学习css,所以体会不到它的效果. div和span都可以把信息独立称一个小小都区域. 1.什么是div? 作用:一般用于配合css完成网页都基本布局 如何快速打出以下样式? <div class="header"></div> 先打上div.header  然后按下tab键 2.什么是span