html各元素中的区别
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各元素中的区别的更多相关文章
- margin在块元素、内联元素中的区别 padding
(1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(bloc ...
- innerHTML和innerText的区别,以及select元素中怎么取出被选中的option。
一.innerHTML和innerText的区别. 元素.innerHTML = 字符串,是将一对或一个标签所标识的内容全部替换为所赋予的字符串,如果字符串中有标签,浏览器将自动识别其中的标签. 元素 ...
- 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- HTML的标签元素分类的区别
HTML ,即Hyper Text Markup Language 超文本标记语言: 文本:纯字符,如window中的txt文本 超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容 HTML的基 ...
- pop 在列表中和字典中的区别
pop 在列表中和字典中的区别 字典中 pop() 语法:dict.pop(key,[value]) 说明:删除指定键及对应的值,如果在字典中不存在键及value,则返回pop()中指定的key对应的 ...
- block(块级元素)和 inline(内联元素) 的区别
block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...
- js中== 和===中的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- continue语句在for语句和while语句中的区别
while语句的形式: while( expression ) statement for语句的形式: for( expression1; expression2;expression3 ) // ...
随机推荐
- flex属性值----弹性盒子布局
里面的属性都 是在有display: flex的情况 下才生效. 兼容性写法: display: -webkit-box; /*老版本语法: Safari, iOS, Android browse ...
- sharepoint:拥有完全控制权限的用户依然“拒绝访问”
//来源 http://www.cnblogs.com/jindahao/archive/2012/04/25/2468714.html 遇到问题: 拥有完全控制权限的用户依然拒绝访问. 可能的原因: ...
- 压测软件-Tsung.安装篇
author :James,jimingsong@vip.qq.com author :James,jimingsong@vip.qq.com since :2015-03-02 tsung介绍 ts ...
- 转:【译】Asp.net MVC 利用自定义RouteHandler来防止图片盗链
[译]Asp.net MVC 利用自定义RouteHandler来防止图片盗链 你曾经注意过在你服务器请求日志中多了很多对图片资源的请求吗?这可能是有人在他们的网站中盗链了你的图片所致,这会占用你 ...
- C#用 excel 作为模板打印
//打印操作,套打.打印.预览 enum PrintFlag { /// <summary> /// 套打,只打印没 ...
- 七天学会ASP.NET MVC(1-3)源代码下载
原文路径: 中文: http://www.cnblogs.com/powertoolsteam/p/MVC_one.html 英文: http://www.codeproject.com/Artic ...
- HTML Dom操作数据表
在QTP中有时候使用HTML Dom会带来事半功倍的效果,比如访问页面元素对象,对元素对象进行定位和获取属性值等,最近开始学HTML Dom的一些方法,属性,事件,修改等. 下面是通过HTML Dom ...
- java学习 (2)xml操作 SAX(增、删、改、查)
sax是事件驱动的,sax是一种推模式 SAX常用事件: startDocument()----文档开始事件 startElement()-----元素开始事件 charElement()----文本 ...
- .net通过WCF调用java发布的服务,获取数据
功能描述 java作为后台,连接数据库获取数据,然后发布SOAP services,让.net平台通过WCF进行引用. 实现步骤 1.在项目特定文件夹下,右键->添加服务引用,输入服务的url地 ...
- Linux文件系统简介及常用命令
在linux系统中一切皆是文件,下面简要总结了一下linux文件系统中分区类型.文件系统类型以及常用命令. 一.分区类型1.主分区:最多只能有四个2.扩展分区:只能有一个,也可以看做是主分区的一种.即 ...