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

巴扎黑
巴扎黑 原创
2017-06-27 13:24:46 3958浏览

块级元素:block-level,相信大家都知道吧(or Google it)。以前在写代码的时候,面对

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

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

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

    BrowsersCSS
    IE6/IE7li{display:block;}
    IE8+ / Webkit / Firefox / Operali{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 或者其他疑问,估计也就能很快反应过来了。

    • 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 是不是块级元素分析的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。