标签 li 是不是块级元素分析

  发布时间:2011-04-26 11:30:15   作者:佚名   我要评论
块级元素:block-level,相信大家都知道吧(or Google it)。以前在写代码的时候,面对
  • 标签总觉得很奇怪。
  • (福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

    为什么它可以设定高度,但又不像 <h1 /> 这些元素,那种感觉就像它是个“半内联"的(内联:inline[text]-level)元素。HTML 4是这样描述的:

    The following elements may also be considered block-level elements since they may contain block-level elements:

    • DD – Definition description
    • DT – Definition term
    • FRAMESET – Frameset
    • LI – List item
    • TBODY – Table body
    • TD – Table data cell
    • TFOOT – Table foot
    • TH – Table header cell
    • THEAD – Table head
    • TR – Table row

    这段描述中,似乎也是在说, <li /> 就是一个"半内联"的元素。当然,这个列表里面的类似于 <td /> 这些元素,也曾给我带来这样的疑惑。今天看了一下各浏览器的默认CSS。结果是这样的:

    Browsers CSS
    IE6/IE7 li{display:block;}
    IE8+ / Webkit / Firefox / Opera li{display:list-item;}

    在这里,也基本上明了了。在除 IE6/7 以外的 A-Grade 浏览器中,就是一个"半内联"的元素。提到 display:list-item; ,其实,即使现在所有的 A-Grade 浏览器都支持,用的人其实不多。为什么?其实就是没什么用。在 Quirks Mode,PPK 是这样说的:

    display: list-item means that the element is displayed as a list-item, which mainly means that it has a bullet in front of it (like an UL), except in IE 5 on Mac where it gets a number (like an OL). The numbers are buggy: all previous LI’s in the page count as one, so this example starts with number 5 (the screenshot was made before I inserted my compatibility-LI’s).

    Live example:

    display: block

    display: list-item
    display: list-item

    Right。其实这个意义不大。但也算是解了自己的一个疑惑。分享出来,如果你也有这样的疑惑,或许下次 Coding 的时候出现 Bug 或者其他疑问,估计也就能很快反应过来了。

    相关文章

    • 详解XML中的标签与元素的使用

      这篇文章主要介绍了XML中的标签与元素的使用,是XML入门学习中的基础知识,需要的朋友可以参考下
      2016-02-14
    • div标签中的元素margin-top失效的解决方法

      元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法,感兴趣的朋友可以参考下
      2014-02-17
    • HTML5在a标签内放置块级元素示例代码

      你没看错:用一个A标签包裹块级元素,在HTML5以前,a标签属于行内元素,而div,h1,p 等为块级元素,如果强行包裹,可能会被强行截断为多个a标签,感兴趣的朋友可以了解些
      2013-08-23
    • HTML标签及基本元素学习总结

      最近学习了一些html的知识,以防忘记所以整理了一下,以备不时之需。主要由html的基本元素到超链接、图像之类的,感兴趣的朋友可以参考下哈,希望对大家有所帮助
      2013-06-26
    • HTML中的标签和元素的区别详解

      很多人可能都没有把哪个叫标签,哪个叫元素这个概念搞清楚,包括之前的我也是,一直都是混淆着,特意搜索查阅了一些资料,现将我得出的结论写出来,与大家分享下
      2013-04-22
    • css 背景透明 元素(标签)背景透明的css设计

      今天要设计一个定位在图片上的标签,标签的背景要有一定的透明度,使用到了opacity的属性,过去没太注意这个属性的兼容性问题,结果很是郁闷
      2013-01-09
    • HTML元素(标签)大全及使用介绍

      HTML元素(标签)大全及使用说明
      2010-07-04
    • HTML 元素 标签教程

      HTML文档是由HTML元素组成的文本文件。 HTML元素是预定义的正在使用的HTML标签。 HTML标签通常成对出现
      2009-07-16
    • 元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法

      下面小编就为大家带来一篇元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2016-09-09

    最新评论

    ?


    http://www.vxiaotou.com