css的display屬性怎么實(shí)現(xiàn)塊級(jí)元素和內(nèi)聯(lián)元素的相互轉(zhuǎn)換

這篇文章給大家分享的是有關(guān)css的display屬性怎么實(shí)現(xiàn)塊級(jí)元素和內(nèi)聯(lián)元素的相互轉(zhuǎn)換的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　默認(rèn)情況下，段落<p>（塊級(jí)元素）的默認(rèn)display值為block，但可以呈現(xiàn)為內(nèi)聯(lián)值：

　　p{display:inline;}

　　為什么不使用一個(gè)HTML內(nèi)聯(lián)元素，比如<SPAN>呢？

　　因?yàn)槟x擇HTML元素來(lái)表示它的意義，而不是它的渲染。如果我們決定一個(gè)段落是最適合我們的內(nèi)容的，我們就不能僅僅為了造型的目的而改變標(biāo)簽。CSS是實(shí)現(xiàn)樣式的。

　　簡(jiǎn)而言之，display允許在不改變其含義的情況下改變?cè)氐念愋汀?/p>

　　每個(gè)display選項(xiàng)都有特定的渲染行為：

　　block將占用整個(gè)寬度

　　inline將作為純文本

　　inline-block正如它的名字所暗示的那樣，是一種塊狀和內(nèi)聯(lián)行為的復(fù)合體，是“兩全其美”的選擇

　　list-item類似于block占用可用的整個(gè)寬度，但顯示了一個(gè)額外的項(xiàng)目符號(hào)

　　table，table-row并且table-cell都有非常具體的，雖然意外，行為，讓更多的有趣布局

　　display：block

　　這會(huì)將任何元素轉(zhuǎn)換為塊元素。

　　此技術(shù)通常用于鏈接以增加其可點(diǎn)擊區(qū)域，可通過(guò)設(shè)置背景顏色輕松評(píng)估。

　　.menua{background:red;color:white;}

　　<ulclass="menu">

　　<li>

　　<ahref="#">首頁(yè)</a>

　　</li>

　　<li>

　　<ahref="#">文章</a>

　　</li>

　　<li>

　　<ahref="#">視頻</a>

　　</li>

　　<li>

　　<ahref="#">登錄</a>

　　</li></ul>

感謝各位的閱讀！關(guān)于“css的display屬性怎么實(shí)現(xiàn)塊級(jí)元素和內(nèi)聯(lián)元素的相互轉(zhuǎn)換”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！