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 文档必须拥有根元素。
  • 相关阅读:
    POJ 3436 ACM Computer Factory (网络流,最大流)
    POJ 1847 Tram (最短路径)
    POJ 1062 昂贵的聘礼(图论,最短路径)
    POJ 2502 Subway / NBUT 1440 Subway / SCU 2186 Subway(图论,最短距离)
    POJ 3159 Candies (图论,差分约束系统,最短路)
    POJ 1511 Invitation Cards / UVA 721 Invitation Cards / SPOJ Invitation / UVAlive Invitation Cards / SCU 1132 Invitation Cards / ZOJ 2008 Invitation Cards / HDU 1535 (图论,最短路径)
    POJ 2240 Arbitrage / ZOJ 1092 Arbitrage / HDU 1217 Arbitrage / SPOJ Arbitrage(图论,环)
    POJ 3660 Cow Contest / HUST 1037 Cow Contest / HRBUST 1018 Cow Contest(图论,传递闭包)
    POJ 1502 MPI Maelstrom / UVA 432 MPI Maelstrom / SCU 1068 MPI Maelstrom / UVALive 5398 MPI Maelstrom /ZOJ 1291 MPI Maelstrom (最短路径)
    POJ 1860 Currency Exchange / ZOJ 1544 Currency Exchange (最短路径相关,spfa求环)
  • 原文地址:https://www.cnblogs.com/spore/p/6130790.html
Copyright © 2011-2022 走看看