CSS Display 外觀顯示

display 是 CSS 中控制元素「外觀行為」的最重要屬性之一。它決定了元素在頁面上的排列方式、是否換行? 能否設定寬高? 以及與其他元素的互動方式。

常見的屬性值

屬性值	說明	代表元素
block	區塊元素，會換行並佔滿一整行，可設定寬高	<div>、<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<blockquote>、<fieldset>、<legend>、<article>、<section>、<main>、<header>、<footer>、<aside>
inline	行內元素，不會換行，只佔內容寬度，無法設定寬高。	<a>、<span>、<em>、<strong>、<i>、<b>、<label>、<code>
inline-block	行內排列，但可設定寬高。	<img>、<input>、<textarea>
none	元素不顯示，從排版中移除，不佔空間。	<dialog>
flex	啟用彈性盒子布局，方便做彈性排列。	-
grid	啟用網格布局，適合做複雜的二維排列。	-
table	讓元素像表格一樣排列。	<table>
list-item	讓元素表現得像清單項目。	<li>