[Back To Basic] CSS display

display

• 是版面配置最重要的屬性
• 決定元素的呈現方式
• 每個HTML元素都有預設的display值
• 大部分的元素display值為: inline 或 block

區塊元素

• 開始於新的一列，並延伸至最寬
• 常見的區塊元素
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline元素

• 不會開始於新的一列，只占用必要寬度
• 常見的 inline 元素
• <span>
• <a>
• <img>

display: none

• 被用於隱藏 / 顯示元素
• 並不會刪除元素或創造元素(元素一直都存在，只是看不到)
• <script>的 display，預設值為 none

覆蓋預設值

頁面配置常常需要改變 display 的值來做出特定的樣式

e.g. <li> 原本 display 為 block，可用以下語法覆蓋預設值，改成 inline

li {

  display: inline;

}

隱藏元素時該用 display: none 還是 visibility: hidden?

• display: none
• 會將整個元素占用的空間一起移除
• visibility: hidden
• 會將元素占用的空間保留，但是看不到元素

source code