html各元素中的区别

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更多地被用来实现宏伟布局和设计包含块,或包含框的样式。 

 1 补充:class和id在页面里面的使用方法:
 2 class:
 3 <style type="text/css">
 4 .footer{background:red;}
 5 </style> <div class="footer">footer</div>
 6 id: <style type="text/css">
 7 #footer{background:red;}
 8 </style>
 9 <div id="footer">footer</div>
10
11 定义class的css是用点:“.”,如.footer
12 定义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时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

时间: 2024-09-28 15:23:03

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

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

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr&

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?   

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

<td style="word-break:break-all"> 强制换行 <td  style="width:80px;display:block;boverflow: hidden;">超出隐藏,注意要设置宽度. 内联转化为块状:display:block 或 float:left / right 块状转化为内联:display:inline; 但是要注意内联元素是不能设置宽度和高度的.那就要强制把内联元素转换为块级元素了 div这样的

HTML的标签元素分类的区别

HTML ,即Hyper Text Markup Language 超文本标记语言: 文本:纯字符,如window中的txt文本 超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容 HTML的基本结构: <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html> HTML元素类型: (1)     区

块级元素与行内元素(内联元素)的区别和联系

在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element).那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念.块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其 他的四方块,并可以呈现在页面上任何地方.默认情况下块元素,是独占一行的.常见的块元素:div.h1-h6标题.form(只能用来容纳其他块元

后代选择器和子元素选择器的区别

原文 简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选择器的相关概念 1.1.后代选择器 后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. h1 em {color:red;} 1.2.子

让子元素在父元素中水平居中align-items

做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元素交叉轴上如何对齐的,大多数不理解交叉轴是什么,下面举例来说明,不多说直接上代码 现在是这样显示的,我需要让子元素在父元素中垂直居中 1需要给父元素加display:flex;(不明白的可以先查下,后期会说明这个属性的作用) 2.再给父元素(也就是box)加align-items:center; 效

AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,