display屬性

每個HTML元素都有display屬性的預設值，常見的類型為區塊元素(block)或行內元素(inline)，兩者的差別在於顯示所占用的空間與型態。

• 語法：

  E {
      display: 顯示參數;
  }
  

• block

  區塊元素會將自己劃分為一個獨立的區塊，寬度的預設會撐到最大，並且讓內容自動換行顯示，可以設定元素的寬、高、margin、padding，常見的區塊元素包含div、p、form、header、footer、section等等。

• inline

  行內元素會在行內劃分出一個區塊，並且不會自動換行顯示，保留原本內容的格式，常見的區塊元素包含span、a等等。

• none

  將元素調整為不顯示的效果，script是一個典型的例子。通常會搭配JavaScript一起使用，可以透過JavaScript動態修改元素的display屬性，用來隱藏或顯示該元素，而不是將元素從頁面中刪除或重建。

  舉例：
  HTML

  <p>這段文字會顯示，<span>這段文字會消失</span>這段文字也會顯示</p>
  

  CSS

  span {
      display: none;
  }
  

  顯示：
  
  利用display: none的效果，會讓<span></span>中的文字消失，並不會保留元素原本該顯示的空間。

除了上述這些之外，還有其他的屬性值，可以參考這裡所提供的內容。
接下來會針對幾個display的屬性值繼續說明！

參考資料：https://zh-tw.learnlayout.com/display.html
https://www.wibibi.com/info.php?tid=CSS_display_%E5%B1%AC%E6%80%A7
https://developer.mozilla.org/en-US/docs/Web/CSS/display