SPAN元素和DIV元素有的区别

前几天做自适应Skin的时候了解了一下块(block)的含义。发现了这样的一个问题。
SPAN元素和DIV元素有什么区别 
解决思路：
最明显的区别是：DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display: block就成了块元素了。
具体步骤：

div,span{border:1px solid #f00;margin:2}

div1

div2

span1span2

div3

div4

span3
span4

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

特别提示
本例代码运行效果（点运行代码）所示，为了更能说明问题，这里给块元素和内嵌元素都加了1像素宽的红色实线边框，从图中可以看到， DIV默认为块元素，定义display属性值为inline后以内嵌元素显示，而SPAN默认为内嵌元素，定义display属性值为block后则以块元素显示。
特别说明

本例主要说明了display属性的两个值block和inline的用法及意义。

赞 (0)

相关推荐

  • SPAN元素和DIV元素有的区别

    前几天做自适应Skin的时候了解了一下块(block)的含义.发现了这样的一个问题. SPAN元素和DIV元素有什么区别  解决思路: 最明显的区别是:DIV是块元素,SPAN是内嵌元素.块元素相当于内嵌元素在前后各加一个<br>换行.其实,块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display: block就成了块元素了. 具体步骤: div,span{border:1px solid #f00;margi

  • jquery中子元素和后代元素的区别示例介绍

    今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别 后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码 代码如下: <div>This is <strong>very</strong> important

  • JavaScript 关于元素获取焦点(隐藏元素与div)

    1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我

  • 基于javascript实现按圆形排列DIV元素(三)

    基于javascript实现按圆形排列DIV元素(三)

    $(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop}); 效果图: 分析图: 上图中: 黑色:是外层容器; 黄色:是需要按椭圆运动的图片 橙色:每个图片元素距离容器顶部的距离 紫色:长半径或短半径; 蓝色:图片距离容器顶部最大的距离 绿色:坐标轴; 白色:椭圆运动轨迹; 一.原理分析: 1.1按椭圆

  • js动态删除div元素基本思路及实现代码

    在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) 复制代码 代

  • 基于javascript实现按圆形排列DIV元素(一)

    基于javascript实现按圆形排列DIV元素(一)

    效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点o; 圆心角:角NOG; 黄色:需要按圆形排列的,绝对定位的DIV元素; 红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点; 二.涉及到的概念定义: 2.1.弧度:弧度是角的度量单位. (红色部分为弧长,角A为弧长对应的圆心角) 弧长等于半径的弧,其所对的圆心角为1弧度.(即两条射线从圆心向圆周射出,形成一个夹角和夹角正

  • 基于javascript实现按圆形排列DIV元素(二)

    基于javascript实现按圆形排列DIV元素(二)

    一.原理分析 1.1怎么才能让DIV元素动起来? 动起来的实质,就是改变DIV的位置,也就是改变其left和top值; 2.2怎么上DIV元素动起来的时候,是在规定的圆周上面? 通过上一次的分析,让DIV按圆形排队,我们知道了,如要让DIV定位在圆周上面,主要是根据角度(弧度)来实现的. 看下图: 上图中,我们B元素和C元素的定位是如何实现的?根据上一次讲的公式,如下: (index:元素的索引值,radius半径,dotLeft:圆心的横坐标,dotTop:圆心的纵坐标) B的left = M

  • js使用removeChild方法动态删除div元素

    在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

  • js删除数组中的元素delete和splice的区别详解

    例如有一个数组是 :var textArr = ['a','b','c','d']; 这时我想删除这个数组中的b元素: 方法一:delete 删除数组 delete textArr[1]  结果为: ["a",undefined,"c","d"] 只是被删除的元素变成了 undefined 其他的元素的键值还是不变. 方法二:aplice 删除数组 splice(index,len,[item]) 注释:该方法会改变原始数组. index:数组开

  • JavaScript 数据元素集合与数组的区别说明

    其中getElementsByName(name)方法是获取页面中所有具有name属性的元素,但这个方法在IE与标准浏览器中所取到的内容不一样.在IE中getElementsByName(name)方法所取到的元素是其本身就自带有name属性也就是form表单中所列出的所有元素(这些元素本身就自带有name属性):标准浏览器中getElementsByName(name)方法所取到的元素是具有name属性的元素(本身就带有此属性+人为添加的此属性).所以如果在IE浏览器中用此方法来获取页面中所有

随机推荐