[CSS] display屬性

display屬性決定了html元素的顯示特性,常見設定值有:inlineblockinline-blocknone,這幾個是比較重要且常用的。

將依以下順序介紹:
1、如何區分html標籤是屬於行內元素(inline)區塊元素(block)
2、inline-block
3、display:none與visibility:hidden的差異

一、如何區分html標籤是屬於行內元素或區塊元素

只要你將兩個相同元素寫下來後,看第二個會不會段行,就可以知道該元素是屬於inline行內元素或是block區塊元素了,例:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    .theDiv{
      width:200px;
      border:1px solid black;
    }
    .para{
      border:1px solid black;
    }
    .link{
      border:1px solid red;
    }
    </style>
  </head>

  <body>
    <div class="theDiv">
      <p class="para">這是段落一</p>
      <p class="para">這是段落二</p>
      <a class="link" href="#">這是連結一</a>
      <a class="link" href="#">這是連結二</a>
    </div>
  </body>
</html>

顯示如圖,可見<p>是block區塊元素(因為會斷行)、<a>是inline行內元素(在同一行內繼續顯示,沒有斷行):
判斷是block區塊元素或inline行內元素
另外要注意的是,當一個元素是inline行內元素時,就無法使用margin-topmargin-bottomheight,就算你設定了,其實也不會有任何效果喔。當然你可以將<a>改成區塊元素(display:block),這樣它就擁有block區塊元素的特性(會斷行、可設定margin-topmargin-bottomheight)。

二、inline-block

例如以上範例的<a>元素,我們希望它不要斷行,但能擁有block區塊元素的特性,只要將它設定成display:inline-block這個行內區塊元素即可。例:

.link{
  border:1px solid red;

  display: inline-block;  /* 新增這行,設定行內區塊元素(inline-block) */
  margin-top:100px;       /* 這增這行,這時設定margin-top就會有其效果了 */
}

三、display:none與visibility:hidden的差異

以上的.para修改成以下:

.para{
  border:1px solid black;

  display:none;  /* 新增這行 */
}

顯示如圖:(會發現<p>消失了,且連結的部份會往上移取代原先<p>的位置)
將display設定none

若將.para修改成以下:

.para{
  border:1px solid black;

  visibility: hidden;  /* 新增這行 */
}

顯示如圖:(會發現<p>雖然消失了,但仍”佔位”原來的位置)
將visibility設成hidden

參考資料:
htmldog:Display

如果文章對您有幫助,請您不吝分享,
這將是我繼續寫下去的原動力啊!感謝。