HTML中DIV与SPAN的区别

html的div和span, 经常会用到, 尤其是前者。

1. div是块级元素, 实际上就是一个区域, 主要用于容纳其他标签。 默认的display属性是block

2. span是行内元素, 主要用于容纳文字。 默认的display属性是inline

1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div> 
2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如: 
测试<div >紧跟前面的"测试"显示</div><span >这里会另起一行显示</span> 
提示:如果不对DIV元素定义任何CSS属性,其显示效果将行将于P元素。

因为DIV与SPAN元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。

DIV指定渲染 HTML 的容器。 
SPAN指定内嵌文本容器。 
总的来说,一个div是占一个块的,它的默认display属性是block,表示一个块。如: 
<div>aaa</div>bbb显示出来,是两行。 
而span,它的display默认属性是inline,可以连在一起的。如: <span>aaa</span>bbb,显示出来是一行。 
div一般用于排版,而span一般用于局部文字的样式。

html css 中ID与class的区别

1,在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’。
2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。
4,在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反,它先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。
5,目前浏览器都能允许在同一个页面内出现多个相同属性值的id,一般情况下也能正常显示,不过当使用javascript通过id来控制元素时就会出现错误。
6,在实际应用时,class更多的被应用到文字版块以及页面修饰等方面,而id更多地被用来实现宏伟布局和设计包含块,或包含框的样式。 

 补充:class和id在页面里面的使用方法:
class:
<style type="text/css">
.footer{background:red;}
</style> <div class="footer">footer</div>
id: <style type="text/css">
#footer{background:red;}
</style>
<div id="footer">footer</div> 定义class的css是用点:“.”,如.footer
定义id的css是用井号“#”,如#footer

Relative和absolute定位这两个有什么区别?

用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。
Position属性有四个值:static、fixed、absolute和relative,

后面两个在布局中的定位里是经常用到的,顾名思义,

absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。

ralative是指相对定位,就是依据left,right,top,bottom等属性在正常文档流中偏移位置。

但是,怎么个绝对法,又怎么个相对法呢?

1、当Position属性值为Relative时对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时,只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时,只有left起作用。

2、当Position属性值为absolute时对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。

在Position属性值为absolute的同时,如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

XHTML与HTML最主要的区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • XHTML标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

html各元素中的区别的更多相关文章

  1. margin在块元素、内联元素中的区别 padding

    (1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...

  2. innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。

    一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...

  3. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  4. CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  5. HTML的标签元素分类的区别

    HTML ,即Hyper Text Markup Language 超文本标记语言: 文本:纯字符,如window中的txt文本 超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容 HTML的基 ...

  6. pop 在列表中和字典中的区别

    pop 在列表中和字典中的区别 字典中 pop() 语法:dict.pop(key,[value]) 说明:删除指定键及对应的值,如果在字典中不存在键及value,则返回pop()中指定的key对应的 ...

  7. block(块级元素)和 inline(内联元素) 的区别

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

  8. js中== 和===中的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. continue语句在for语句和while语句中的区别

    while语句的形式: while( expression ) statement for语句的形式: for( expression1; expression2;expression3 )   // ...

随机推荐

  1. HashMap按键排序和按值排序

    对map集合进行排序   今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单 ...

  2. 可用fidder测试的一些安全测试点

    以下是整理的一些常见的安全渗透测试点 1.用工具fidder抓包拦截篡改服务器端返回的代码,导致下级拥有对上级的访问操作权限 以下是公司开发写的用户角色权限页面跳转 修改普通角色跳转的页面为管理员跳转 ...

  3. Textarea自适应高度 JS实现,兼容IE6\7\8\9\10\11

    <!DOCTYPE html> <html> <head> <title>autoresizing textarea</title> < ...

  4. SpringMVC 系列教程1-文件上传-配置

    SpringMVC默认没有配置上传解析器 使用SpringMVC来处理上传必须添加对MultipartResolver上传解析器的声明配置. 配置之后,客户端每次进行请求的时候,SpringMVC都会 ...

  5. qtp childObjects用法

    ChildObjects: Returns the collection of child objects contained within the object. F1帮助解释:返回当前调用对象的所 ...

  6. Linux下SVN的简单配置

    1.安装svn sudo yum install subversion 2.查看是否安装成功 svnserve --version 3.创建svn目录 svnadmin create 目录名 例如:s ...

  7. android 简单粗暴的注解初始化View学习

    原理是在Activity加载好后通过找到Activity中使用注解的字段,再通过Java反射的方式,动态的给这个字段设置值. 1定义一个注解接口 /** * view inect by id * * ...

  8. [妙味DOM]第六课:鼠标滚轮和COOKIE

    知识点总结: 鼠标滚轮事件 存在兼容性问题: IE/chorme : onmousewheel FF : DOMMouseScroll,必需用在addEventListener下,例如: if (ob ...

  9. html5权威指南:标记文字、组织内容、文档分节

    HTML5新增及删除标签:http://www.cnblogs.com/starof/archive/2015/06/23/4581850.html 第八章:标记文字                 ...

  10. KVC、KVO

    概述 由于ObjC主要基于Smalltalk进行设计,因此它有很多类似于Ruby.Python的动态特性,例如动态类型.动态加载.动态绑定等.今天我们着重介绍ObjC中的键值编码(KVC).键值监听( ...