首頁 web前端 html教學 標籤 li 是不是區塊級元素分析

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

Jun 27, 2017 pm 01:24 PM
元素 分析

區塊元素: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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在uniapp中實現資料統計與分析 如何在uniapp中實現資料統計與分析 Oct 24, 2023 pm 12:37 PM

如何在uniapp中實現資料統計與分析

織夢CMS二級目錄打不開的原因分析 織夢CMS二級目錄打不開的原因分析 Mar 13, 2024 pm 06:24 PM

織夢CMS二級目錄打不開的原因分析

TP6 Think-Swoole RPC服務的效能分析與最佳化策略 TP6 Think-Swoole RPC服務的效能分析與最佳化策略 Oct 12, 2023 am 10:34 AM

TP6 Think-Swoole RPC服務的效能分析與最佳化策略

CSS過渡效果:如何實現元素的滑動效果 CSS過渡效果:如何實現元素的滑動效果 Nov 21, 2023 pm 01:16 PM

CSS過渡效果:如何實現元素的滑動效果

分析騰訊主要的程式語言是否為Go 分析騰訊主要的程式語言是否為Go Mar 27, 2024 pm 04:21 PM

分析騰訊主要的程式語言是否為Go

CSS變形:如何實現元素的旋轉效果 CSS變形:如何實現元素的旋轉效果 Nov 21, 2023 pm 06:36 PM

CSS變形:如何實現元素的旋轉效果

分析靜態定位技術的優缺點 分析靜態定位技術的優缺點 Jan 18, 2024 am 11:16 AM

分析靜態定位技術的優缺點

如何使用CSS實現元素的透明度漸變效果 如何使用CSS實現元素的透明度漸變效果 Nov 21, 2023 pm 01:38 PM

如何使用CSS實現元素的透明度漸變效果

See all articles