首頁  >  文章  >  web前端  >  標籤 li 是不是區塊級元素分析

標籤 li 是不是區塊級元素分析

巴扎黑
巴扎黑原創
2017-06-27 13:24:464496瀏覽

區塊元素:block-level,相信大家都知道吧(or Google it)。以前在寫程式碼的時候,面對

  • 標籤總覺得很奇怪。 為什麼它可以設定高度,但又不像

    這些元素,那種感覺就像它是個「半內聯」的(內聯: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。結果是這樣的:

    ##IE6/IE7#IE8+ / Webkit / Firefox / Opera
    Browsers CSS
    li{display<a href="http://www.php.cn/wiki/927.html" target="_blank">:block;</a>}
    #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 或其他疑問,估計也就能很快反應過來了。

    • 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