本篇文章就給大家詳細的介紹css display屬性的具體用法，希望能解決大家的疑問。（為了便於大家理解本篇文章，推薦閱讀我的這篇文章【html元素是怎麼區分的？】其中有關於區塊層級元素和行內元素的具體介紹）
首先我給大家列舉出 css display常用的幾個值：none、block、inline、inline-block
接下來我們通過具體的代碼執行個體來一一詳解css display屬性用法。
一、css display block屬性具體樣本介紹
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css display:block屬性執行個體</title> <style> *{padding: 0;margin:0;list-style: none;} ul li{float: left;} a{ display:block; width: 30px;height: 30px; color:#fff; background: green;margin: 5px; text-decoration: none; text-align: center; line-height: 30px; } </style></head><body><div class="demo"> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul></div></body></html>
以上代碼通過瀏覽器訪問，效果1：
我們把a標籤中的display:block;屬性注釋掉，其效果2：
那麼大家通過圖1 和圖2的比較可以發現，圖1中因為設定了display:block屬性，a中元素塊能顯示寬高以及內外邊距設定。而圖2中只是把display block屬性去掉，就導致全部元素塊不能設定寬高。
也就是說display block屬性可以將行內元素設定為區塊層級元素，隨後設定它的寬高和上下左右的內外邊距padding和margin。可以通過這個屬性進而達到我們想要的效果。
二、css display none屬性具體樣本介紹
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css display:none屬性執行個體</title> <style> *{padding: 0;margin:0;list-style: none;} ul li{float: left;} a{ display: none; width: 30px;height: 30px;color:#fff; background: green;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;} </style></head><body><div class="demo"> <p>a元素不會顯示出來</p> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul></div></body></html>
效果如3：
從圖3可以發現，我們在給a設定了display:none;屬性後，其所有元素就隱藏了不會顯示出來。所以顯然決定display 隱藏 顯示的屬性值就是none屬性。display none通常會被用在導覽列一二級欄目的設計上。
三、css display inline屬性介紹
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css display:inline屬性執行個體</title> <style> p {display: inline} </style></head><body> <p>p標籤是區塊層級元素。</p> <p>此時顯示為內嵌元素，不換行。</p></body></div></body></html>
效果如4：
從圖4可以知道，css display inline屬性就是可以將元素變成內嵌元素也就是行內元素，並且元素前後沒有分行符號。
四、css display inline-block屬性介紹
顧名思義，inline-block屬性肯定是結合了inline和block屬性的特性，也就是說此屬性可以將元素變成行內塊元素顯示。既可以讓指定在同一行內顯示，又可以設定其元素的寬度和高度。
那麼本篇文章就是關於css display屬性的具體用法介紹，其中包括none、block、inline、inline-block的具體使用樣本。具有一定的參考價值，希望對有需要的朋友有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
