解决思路 :
最明显的区别是: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是很容易混淆和弄错的HTML标签与CSS属性,今天52CSS.com简单的罗列出它们的区别与使用要点,供大家参考。
这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: < span> This content will share the same line... </ span> < span> ...as this content </ span> < div...
这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: < span> This content will share the same line... </ span> < span> ...as this content </ span>< div> ...
这两个标签都没有自动样式。 它们之间唯一的区别:内容包裹的span标签会显示不换行,而包裹内容div意愿: < span> This content will share the same line... </ span> < span> ...as this content </ span>< div> ...
两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到客户端。 异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 Checkbox树...
使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示。 通过javascript进行动态的修改,修改的方法有...
首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,...
从前在页面布局的时候,table被大量的使用,其中一个好处便是元素可以轻松的...一个父容器,装有两个子容器,在c1宽度不确定的情况下,如何让c2填充满父容器呢?可以这样: 复制代码代码如下: <span xss=removed> <
所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-...
※div span 标签:起到一个包裹作用,将网页分开布局,没有任何语义化 div是一个块级标签,可以设置其大小 span是一个行内元素,不能设置其大小,限定于内容的元素的改变 <b><b><strong></strong>加粗 <i></i><em>...
1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 <body> <div> 这是一段测试文本 </div> <...
3.在每一个label中创建一个span标签(导航内容),input标签(实现选中于取消选中)type类型为radio,还要创建一个div作为这个导航项被点中是显示内容框, 这里要注意的是input标签的name必须是相同的,我这边取名叫...
返回两个节点集的并集 a b 加 返回数值结果 a-b 减 返回数值结果 a=b 判断是否相等返回Boolean a!=b 不等于 返回Boolean a>b 大于 返回Boolean a>=b 大于等于 返回Boolean ...
tooltip和popover是轻量的、可扩展的、用于提示的指令。对于移动端来讲,这两个指令虽然...(3)uib-tooltip-template 定义提示的html内容,该内容需要放在一个span或者div标签中 代码为: <!DOCTYPE html> <h
所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-...
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 HTML 代码: <img/><img/> jQuery 代码: $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 结果...
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 亲自试一试<html> ...
所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-...
两个视图分别用两个Div包裹,控制div的显示隐藏即可以切换视图了 3、树控件 支持静态的树,即一次性将全部数据加载到客户端。 异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 Checkbox树(可能是...