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. flex属性值----弹性盒子布局

    里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法:   display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...

  2. sharepoint:拥有完全控制权限的用户依然“拒绝访问”

    //来源 http://www.cnblogs.com/jindahao/archive/2012/04/25/2468714.html 遇到问题: 拥有完全控制权限的用户依然拒绝访问. 可能的原因: ...

  3. 压测软件-Tsung.安装篇

    author :James,jimingsong@vip.qq.com author :James,jimingsong@vip.qq.com since :2015-03-02 tsung介绍 ts ...

  4. 转:【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链

    [译]Asp.net MVC 利用自定义RouteHandler来防止图片盗链   你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你 ...

  5. C#用 excel 作为模板打印

    //打印操作,套打.打印.预览        enum PrintFlag        {            /// <summary>            /// 套打,只打印没 ...

  6. 七天学会ASP.NET MVC(1-3)源代码下载

    原文路径: 中文: http://www.cnblogs.com/powertoolsteam/p/MVC_one.html 英文:  http://www.codeproject.com/Artic ...

  7. HTML Dom操作数据表

    在QTP中有时候使用HTML Dom会带来事半功倍的效果,比如访问页面元素对象,对元素对象进行定位和获取属性值等,最近开始学HTML Dom的一些方法,属性,事件,修改等. 下面是通过HTML Dom ...

  8. java学习 (2)xml操作 SAX(增、删、改、查)

    sax是事件驱动的,sax是一种推模式 SAX常用事件: startDocument()----文档开始事件 startElement()-----元素开始事件 charElement()----文本 ...

  9. .net通过WCF调用java发布的服务,获取数据

    功能描述 java作为后台,连接数据库获取数据,然后发布SOAP services,让.net平台通过WCF进行引用. 实现步骤 1.在项目特定文件夹下,右键->添加服务引用,输入服务的url地 ...

  10. Linux文件系统简介及常用命令

    在linux系统中一切皆是文件,下面简要总结了一下linux文件系统中分区类型.文件系统类型以及常用命令. 一.分区类型1.主分区:最多只能有四个2.扩展分区:只能有一个,也可以看做是主分区的一种.即 ...