這篇文章運(yùn)用簡單易懂的例子給大家介紹如何實(shí)現(xiàn)css中的display屬性塊級元素和內(nèi)聯(lián)元素的相互轉(zhuǎn)換？代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供策勒企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為策勒眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

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

p{ display: inline;}

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

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

簡而言之，display允許在不改變其含義的情況下改變元素的類型。

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

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

inline 將作為純文本

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

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

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

display：block

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

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

.menu a{ background: red; color: white;}

<ul class="menu">
  <li>
    <a href="#">首頁</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">視頻</a>
  </li>
  <li>
    <a href="#">登錄</a>
  </li></ul>

效果如下：

如果我們將這些鏈接轉(zhuǎn)換為block，我們會(huì)增加其目標(biāo)區(qū)域：

.menu a{ background: red; color: white; display: block;}

效果如下：

display：inline

這會(huì)將任何元素轉(zhuǎn)換為內(nèi)聯(lián)元素，就好像它們只是簡單的文本一樣。

它通常用于創(chuàng)建水平導(dǎo)航，其中列表項(xiàng)在語義上但在視覺上沒有用處。

<ul class="menu">
  <li>
    <a href="#">首頁</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">視頻</a>
  </li>
  <li>
    <a href="#">登錄</a>

效果如下：

.menu li{ display: inline;}

效果如下：

display: list-item

顯示的唯一HTML元素list-item是（不出所料）列表項(xiàng) <li>，還有定義描述 <dd>。

使用項(xiàng)目符號點(diǎn)（如果在無序列表中<ul>）或使用增量編號（如果在有序列表中<ol>）呈現(xiàn)列表項(xiàng)。

由于這些項(xiàng)目符號和數(shù)字的呈現(xiàn)因?yàn)g覽器而異，并且在CSS中也難以設(shè)置樣式，因此display: list-item從不使用該規(guī)則。實(shí)際上，<li> 通常被渲染為display: block或者display: inline，因?yàn)樗鼈兏哽`活性。

display: none

應(yīng)用display: none;HTML元素會(huì)將其從您的網(wǎng)頁中刪除，就好像它從未存在于您的代碼中一樣。

<p>創(chuàng)新互聯(lián)</p>
<p class="class">創(chuàng)新互聯(lián)</p>
<p>Php中文網(wǎng)</p>

.class{ display: none;}

效果如下：

代碼中有3個(gè)段落，但只有2個(gè)出現(xiàn)，好像第2個(gè)段落從未存在過。

visibility: hidden

CSS屬性visibility與display。略有相似。應(yīng)用會(huì)visibility: hidden; 隱藏頁面中的元素，但只會(huì)將其變?yōu)椴豢梢姡核詴?huì)占用應(yīng)有的空間。

<p>哈哈哈哈</p>
<p class="class">哈哈哈哈哈哈</p>
<p class="class">哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈啦</p>

.class{ visibility: hidden;}

效果如下：

代碼中有5個(gè)段落，只有2個(gè)出現(xiàn)，但隱藏段落應(yīng)該占用的空間仍然存在，但是你看不到它們。

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

新聞標(biāo)題：如何實(shí)現(xiàn)css中的display屬性塊級元素和內(nèi)聯(lián)元素的相互轉(zhuǎn)換？
網(wǎng)站URL：http://www.chinadenli.net/article8/joipop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站策劃、自適應(yīng)網(wǎng)站、App設(shè)計(jì)、靜態(tài)網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)