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

創新互聯公司專注于網站建設，為客戶提供成都做網站、成都網站制作、網頁設計開發服務，多年建網站服務經驗，各類網站都可以開發，品牌網站制作，公司官網，公司展示網站，網站設計，建網站費用，建網站多少錢，價格優惠，收費合理。

默認情況下，段落<p>（塊級元素）的默認display值為block，但可以呈現為內聯值：

p{ display: inline;}

為什么不使用一個HTML內聯元素，比如<SPAN >呢？

因為您選擇HTML元素來表示它的意義，而不是它的渲染。如果我們決定一個段落是最適合我們的內容的，我們就不能僅僅為了造型的目的而改變標簽。CSS是實現樣式的。

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

每個display選項都有特定的渲染行為：

block 將占用整個寬度

inline 將作為純文本

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

list-item類似于block占用可用的整個寬度，但顯示了一個額外的項目符號

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

display：block

這會將任何元素轉換為塊元素。

此技術通常用于鏈接以增加其可點擊區域，可通過設置背景顏色輕松評估。

.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>

效果如下：

如果我們將這些鏈接轉換為block，我們會增加其目標區域：

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

效果如下：

display：inline

這會將任何元素轉換為內聯元素，就好像它們只是簡單的文本一樣。

它通常用于創建水平導航，其中列表項在語義上但在視覺上沒有用處。

<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是（不出所料）列表項 <li>，還有定義描述 <dd>。

使用項目符號點（如果在無序列表中<ul>）或使用增量編號（如果在有序列表中<ol>）呈現列表項。

由于這些項目符號和數字的呈現因瀏覽器而異，并且在CSS中也難以設置樣式，因此display: list-item從不使用該規則。實際上，<li> 通常被渲染為display: block或者display: inline，因為它們更具靈活性。

display: none

應用display: none;HTML元素會將其從您的網頁中刪除，就好像它從未存在于您的代碼中一樣。

<p>創新互聯</p>
<p class="class">創新互聯</p>
<p>Php中文網</p>

.class{ display: none;}

效果如下：

代碼中有3個段落，但只有2個出現，好像第2個段落從未存在過。

visibility: hidden

CSS屬性visibility與display。略有相似。應用會visibility: hidden; 隱藏頁面中的元素，但只會將其變為不可見：它仍會占用應有的空間。

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

.class{ visibility: hidden;}

效果如下：

代碼中有5個段落，只有2個出現，但隱藏段落應該占用的空間仍然存在，但是你看不到它們。

關于如何實現css中的display屬性塊級元素和內聯元素的相互轉換？就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁名稱：如何實現css中的display屬性塊級元素和內聯元素的相互轉換？-創新互聯
網站地址：http://www.js-pz168.com/article40/djojeo.html

成都網站建設公司_創新互聯，為您提供網站策劃、網站內鏈、移動網站建設、營銷型網站建設、靜態網站、自適應網站

廣告

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