在前端開發中，display 屬性控制著元素如何佈局和顯示。它有很多值，以下是一些常見且重要的值及其作用：
塊級元素 (Block-level elements)
-
block: 這是預設值之一。元素會生成一個塊級框，佔據父元素的整行寬度，即使內容不足以填滿。前後都會有換行。例如：<h1>,<p>,<div>,<form>,<header>,<footer>,<section>,<article>,<nav>,<aside>. -
list-item: 將元素顯示為列表項，通常與<li>元素一起使用。會在元素前新增專案符號或編號。
內聯元素 (Inline elements)
-
inline: 元素只佔據內容所需的寬度，不會強制換行。多個內聯元素可以排列在同一行。例如：<span>,<a>,<img>,<input>,<button>,<textarea>,<select>,<strong em>,<small>. -
inline-block: 結合了inline和block的特性。元素像內聯元素一樣排列，但可以設定寬度和高度，並且可以應用內外邊距和邊框。
不顯示 (Hiding elements)
none: 元素完全不顯示，也不會佔據任何空間。就像元素從文件流中移除一樣。與visibility: hidden不同，display: none的元素不會觸發事件，也不會被螢幕閱讀器讀取。
表格元素 (Table elements)
table: 將元素顯示為表格。inline-table: 將元素顯示為內聯表格。table-row-group: 將元素顯示為表格行組（例如：<tbody>）。table-header-group: 將元素顯示為表格標題組（例如：<thead>）。table-footer-group: 將元素顯示為表格腳註組（例如：<tfoot>）。table-row: 將元素顯示為表格行（例如：<tr>）。table-cell: 將元素顯示為表格單元格（例如：<td>和<th>）。table-column-group: 將元素顯示為表格列組（例如：<colgroup>）。table-column: 將元素顯示為表格列（例如：<col>）。table-caption: 將元素顯示為表格標題（例如：<caption>）。
彈性佈局 (Flexbox)
flex: 啟用彈性佈局，使元素成為彈性容器。inline-flex: 啟用內聯彈性佈局。
網格佈局 (Grid)
grid: 啟用網格佈局，使元素成為網格容器。inline-grid: 啟用內聯網格佈局。
其他值
contents: 元素本身不生成框，但其子元素和偽元素仍然會生成框，並按照正常流程佈局。常用於樣式化偽元素，同時避免父元素的額外佈局影響。inherit: 從父元素繼承display屬性的值。
選擇正確的 display 值對於建立具有所需佈局的網頁至關重要。理解不同值之間的差異可以幫助你更好地控制元素的顯示和行為。