`
jiangzhenghua
  • 浏览: 592506 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML中div和span两个标签的区别

 
阅读更多

解决思路
最明显的区别是:DIV是块元素,SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实,块元素和行内元素也不是一成不变的,只要给块元素定义 display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素了。

具体步骤
代码示例:

<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>

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

<img src="demo.gif" style="posibion:absolute;left:20;top:20">

分享到:
评论

相关推荐

    区别div和span、relative和absolute、display和visibility

    div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性,今天52CSS.com简单的罗列出它们的区别与使用要点,供大家参考。

    html5-semantic-containers-lab-v-000

    这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: &lt; span&gt; This content will share the same line... &lt;/ span&gt; &lt; span&gt; ...as this content &lt;/ span&gt; &lt; div...

    html5-semantic-containers-lab-onl01-seng-ft-090820

    这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: &lt; span&gt; This content will share the same line... &lt;/ span&gt; &lt; span&gt; ...as this content &lt;/ span&gt;&lt; div&gt; ...

    html5-semantic-containers-lab-online-web-sp-000

    这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: &lt; span&gt; This content will share the same line... &lt;/ span&gt; &lt; span&gt; ...as this content &lt;/ span&gt;&lt; div&gt; ...

    基于jQuery的控件源码

    两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到客户端。 异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 Checkbox树...

    javascript中获取元素标签中间的内容的实现方法

    使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示。 通过javascript进行动态的修改,修改的方法有...

    原生JavaScript写出Tabs标签页的实例代码

    首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,...

    CSS:Table-cell属性的妙用让div也能享受table定位的好处

    从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的...一个父容器,装有两个子容器,在c1宽度不确定的情况下,如何让c2填充满父容器呢?可以这样: 复制代码代码如下: &lt;span xss=removed&gt; &lt;

    div 垂直居中的多种方法详细介绍

    所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像&lt;div&gt;、&lt;span&gt;这样的元素是没有valign特性的,因此使用vertical-...

    HTML:超文本标题语言

    ※div span 标签:起到一个包裹作用,将网页分开布局,没有任何语义化 div是一个块级标签,可以设置其大小 span是一个行内元素,不能设置其大小,限定于内容的元素的改变 &lt;b&gt;&lt;b&gt;&lt;strong&gt;&lt;/strong&gt;加粗 &lt;i&gt;&lt;/i&gt;&lt;em&gt;...

    html入门到放弃笔记

    1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 &lt;body&gt; &lt;div&gt; 这是一段测试文本 &lt;/div&gt; &lt;...

    html 实现tab切换的示例代码

    3.在每一个label中创建一个span标签(导航内容),input标签(实现选中于取消选中)type类型为radio,还要创建一个div作为这个导航项被点中是显示内容框, 这里要注意的是input标签的name必须是相同的,我这边取名叫...

    Java开源的xpath解析器Jsoupxpath.zip

    返回两个节点集的并集 a b 加 返回数值结果 a-b 减 返回数值结果 a=b 判断是否相等返回Boolean a!=b 不等于 返回Boolean a&gt;b 大于 返回Boolean a&gt;=b 大于等于 返回Boolean ...

    AngularJs的UI组件ui-Bootstrap之Tooltip和Popover

    tooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲,这两个指令虽然...(3)uib-tooltip-template 定义提示的html内容,该内容需要放在一个span或者div标签中 代码为: &lt;!DOCTYPE html&gt; &lt;h

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像&lt;div&gt;、&lt;span&gt;这样的元素是没有valign特性的,因此使用vertical-...

    jQuery完全实例.rar

    迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: &lt;img/&gt;&lt;img/&gt; jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果...

    jQuery详细教程

    通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试&lt;html&gt; ...

    CSS教程之div垂直居中的多种方法

    所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像&lt;div&gt;、&lt;span&gt;这样的元素是没有valign特性的,因此使用vertical-...

    基于jQuery的控件

    两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到客户端。 异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 Checkbox树(可能是...

Global site tag (gtag.js) - Google Analytics