詳解css display屬性中常見的四個屬性值用法(代碼執行個體)

來源:互聯網
上載者:User
我們在進行網頁前端開發的時候,為了使網站在視覺上顯得更加美觀,效果更加豐富,css的強大屬性自然是功不可沒。那麼這裡就要提到 一個我們在網頁前端開發的時候常常使用的屬性,css display屬性。所有主流瀏覽器都支援 display 屬性。其次,我們都知道display 屬性規定元素應該產生的框的類型。而在css display屬性中經常被用到,也是最常見的幾種屬性值:none、block、inline、inline-blockt。

接下來我們就通過具體的代碼執行個體來一一詳解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。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.