接下來我們就通過具體的代碼執行個體來一一詳解css display屬性中最常見的屬性值用法。
一：display ：none，設定元素不會顯示
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css display:none</title><style>* {padding: 0;margin: 0;list-style: none;}.demo{width: 200px;height: 200px;margin:50px auto;}ul li {float: left;}span {width: 30px;height: 30px;color: #fff;background: red;margin: 5px;text-align: center;line-height: 30px;}.a1{display: none;}</style></head><body><div class="demo"><p>數字2不會顯示出來</p><ul><li><span>1</span></li><li><span class="a1">2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li></ul></div></body></html>
以上代碼的如下：
display ：none，設定元素不會顯示，而且會使元素現實的空間也不會保留下來。但有另外一個 visibility: hidden， 是保留元素的空間的。詳細瞭解，看閱讀 css visibility屬性。
二：display:block， 將元素顯示為區塊層級元素
將元素顯示為區塊層級元素，元素前後會帶有分行符號。設定為block後，元素可以設定width和height了。元素獨佔一行。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css display:block</title><style>* {padding: 0;margin: 0;list-style: none;}.demo{width: 500px;height: 200px;margin:50px auto;}ul li {float: left;}span {display:block; width: 30px;height: 30px;color: #fff;background: red;margin: 5px;text-align: center;line-height: 30px;}</style></head><body><div class="demo"><p>span元素定義了寬與高，寬與高都顯示為30px</p><ul><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li></ul></div></body></html>
以上代碼的如下：
其中的span標籤寬高都顯示為30px。當我們把代碼中的display:block去掉後，顯示的如下：
顯然，當我們把display:block去掉後，span的高度、寬度無法設定了。
span 標籤是內嵌元素，不可設定元素高度、寬度及上下左右的內外邊距padding和margin，但當給 span 標籤設定 display:block後，可以把內嵌元素轉換為塊狀元素，這樣就可以設定元素高度、寬度及上下左右的內外邊距padding和margin。
三：display:inline，將元素顯示為內嵌元素
display的預設屬性。將元素顯示為內嵌元素，元素前後沒有分行符號。我們知道內嵌元素是無法設定寬高的，所以一旦將元素的display 屬性設為 inline， 設定屬性height和width是沒有用的。此時影響它的高度一般是內部元素的高度（font-size）和padding。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>css display:block</title><style>* {padding: 0;margin: 0;list-style: none;}.demo{width: 1000px;height: 200px;margin:50px auto;}.demo p{display:inline ;color: #0081EF;}.demo div{display:inline ;color: #70DBDB;}</style></head><body><div class="demo"><p>p標籤和div標籤同為塊狀元素，本應無法在同一行顯示;</p><div>此時全為內嵌元素，不換行，在同一行顯示。</div></div></body></html>
以上代碼的如下：
四：inline-block，將元素顯示為行內塊元素
行內塊元素。這個屬性值融合了inline 和 block 的特性，可以結合inline 和 block來瞭解 inline-block，即是它既是內嵌元素，可以在同一行顯示，又可以設定width和height。
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
