zoukankan      html  css  js  c++  java
  • 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时,则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。

    XHTML与HTML最主要的区别

    • XHTML 元素必须被正确地嵌套。
    • XHTML 元素必须被关闭。
    • XHTML标签名必须用小写字母。
    • XHTML 文档必须拥有根元素。
  • 相关阅读:
    linux 解压tgz 文件指令
    shell 脚本没有执行权限 报错 bash: ./myshell.sh: Permission denied
    linux 启动solr 报错 Your Max Processes Limit is currently 31202. It should be set to 65000 to avoid operational disruption.
    远程查询批量导入数据
    修改 MZTreeView 赋权节点父节点选中子节点自动选中的问题
    关于乱码的问题解决记录
    我的网站优化之路
    对设计及重构的一点反思
    我的五年岁月
    奔三的路上
  • 原文地址:https://www.cnblogs.com/spore/p/6130790.html
Copyright © 2011-2022 走看看