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> |
常見值速查
| 值 | 行為 |
|---|---|
block | 獨佔一行，可設寬高 |
inline | 與文字並排，寬高與上下外距無效 |
inline-block | 能並排又可設寬高 |
flex | 成為 彈性容器 |
grid | 成為 格線容器 |
none | 完全移除，不佔空間 |
table 系列 | 表現得像 表格 |
行內元素的限制
css
/* ❌ 沒有效果 */
span { width: 200px; height: 40px; }
/* ✅ 改成行內區塊後生效 */
span { display: inline-block; width: 200px; height: 40px; }常見問題
為什麼設了寬高沒有反應？
因為元素是行內層級，寬高與上下外距對它無效。改成 inline-block 或 block 之後就會生效。
inline-block 和 block 差在哪？
block 會獨佔一整行，inline-block 能與其他元素並排卻又可以設定寬高，適合按鈕與標籤這類元件。
display 改成 flex 之後子元素怎麼變了？
因為子元素成了彈性項目，會依主軸排列，原本的浮動與垂直外距行為也隨之改變。這是預期中的，對齊改用 彈性盒子 的屬性處理。
隱藏元素用 display: none 好嗎？
它完全不佔空間也不能做動畫，適合真的要移除的內容。需要淡出效果或保留空間時，改用透明度或可見度，見 其他常用屬性。
