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 ) // ...
随机推荐
- 原生JavaScript+CSS3实现移动端滑块效果
在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...
- 使用webview加载html图片、表单超屏幕问题
webView加载html代码时,使用webView自带的 scalesPageToFit 可以解决图片所带来的超过屏幕问题:但是,所带来的问题就是文字变小了,怎样让图片边小,并且文字还是原来html ...
- Cookie小解2
Cookie最早用来标识和认证一个用户,其处理分为以下几步: 1.服务端向客户端发送Cookie 2.浏览器将Cookie保存 3.之后每次浏览器服务服务器时都会将Cookie发向服务器端 ----- ...
- JSONObject处理java.util.Date
JSONObject的内容为: {"userId":"A000004FFDCE14","userName":"好好干g" ...
- 换行符在ajax中返回json,eval时发生的 Unexpected token ILLEGAL
用户如果输入了换行在数据中记录为‘空格’,但不是真正的空格. 程序前台采用ajax和json返回数据绑定时会 出现 Unexpected token ILLEGAL 例子: 在sql中存储为下图 在“ ...
- linux远程登录ssh免密码
原文链接,感谢原作者. (一)问题: 假如我们现在有两台机器:ServerA和ServerB,现在想要让ServerA不用输入密码就能够进行访问. (二)方法和原理: 我们使用ssh-keygen在S ...
- Webpack学习笔记(一)
转载http://zhaoda.net/webpack-handbook/module-system.html 转载http://www.cnblogs.com/vajoy/p/4650467.htm ...
- Json-lib用法
Json-lib用法 1.需要的jar包有一下几个,别的文章中没有xom这个jar包,但我的工程中如果没有这个包,那么,json数据转换为xml数据的程序中在执行XMLSerializer xmlSe ...
- 扩展kmp——原创
扩展kmp LRH 所谓扩展kmp指的是与kmp相似的求辅助数组的原理,但是本身与kmp关系不大. 1.exkmp的用途:给定一个主串s和一个子串t,求出s中每一个后缀 ...
- Swift逃逸闭包之见解
Swift 逃匿闭包顾名思义,就是闭包想要逃跑.当闭包作为参数传给一个方法时,在这个方法被调用完后闭包却还没有被执行,而是等到方法执行完后才调用 基本都是跨线程的时候才会有逃逸闭包这个说法.因为异步 ...