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的用法及意义。
相关推荐
-
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元素(三)
$(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元素(一)
效果图: 一.分析图: 绿色边框内:外层的DIV元素,相对定位; 白色圆形框:辅助分析的想象形状; 白点:为白色圆形的圆心点,中心点,点o; 圆心角:角NOG; 黄色:需要按圆形排列的,绝对定位的DIV元素; 红色点:为每个黄色DIV的坐标点;即绝对定位时的元素,left值 和 top值 ,设置的点; 二.涉及到的概念定义: 2.1.弧度:弧度是角的度量单位. (红色部分为弧长,角A为弧长对应的圆心角) 弧长等于半径的弧,其所对的圆心角为1弧度.(即两条射线从圆心向圆周射出,形成一个夹角和夹角正
-
基于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浏览器中用此方法来获取页面中所有
随机推荐
- GRID拖拽行的实例代码
- java按指定编码写入和读取文件内容的类分享
- Python实现计算最小编辑距离
- ASP.NET 广告控件AdRotator的使用方法与实例
- 检测一个函数是否是JavaScript原生函数的小技巧
- JS对象深度克隆实例分析
- asp.net继承IHttpHandler接口实现给网站图片添加水印功能实例
- Python实现从订阅源下载图片的方法
- js多级树形弹出一个小窗口层(非常好用)实例代码
- css下margin、padding、border、background和font缩写示例
- 基于jQuery实现Ajax验证用户名是否存在实例
- asp中用数据库生成不重复的流水号
- Windows Powershell排序和分组管道结果
- Python遍历zip文件输出名称时出现乱码问题的解决方法
- sqlserver 错误602,未能在sysindexes中找到数据库 的解决办法
- jquery提取元素里的纯文本不包含span等里的内容
- ASP.NET页面请求超时时间设置多种方法
- Android实现关机重启的方法分享
- Android数据加密之Rsa加密
- 关于Django显示时间你应该知道的一些问题