新！我的 44 頁電子書「44 分鐘學會 CSS」出爐了！ 😃
#display
設定元素的顯示行為。
display: none;
元素會完全移除，就好像它從一開始就不在 HTML 程式碼中一樣。
display: inline;
元素會變成一個內嵌元素：它會像一般文字一樣運作。
任何套用的height和width將不會產生任何效果。
display: block;
元素會變成一個區塊元素：它會從新的一行開始，並佔據整個寬度。
display: inline-block;
元素同時具有內嵌和區塊元素的特性
- 內嵌因為元素行為就像簡單文字，並插入在文字區塊中
- 區塊因為你可以套用
height和width值
例如，這個元素有
.element{
height: 3em;
width: 60px;
}
display: list-item;
元素行為就像一個清單項目：<li>。與區塊唯一的不同是清單項目有一個項目符號。
display: table;
元素行為就像一個表格：<table>。
它的內容和子元素行為就像表格儲存格。
display: table-cell;
元素行為就像一個表格儲存格：<td> 或 <th>。
它的內容和子元素行為就像表格儲存格。
display: table-row;
元素行為就像一個表格列：<tr>。
它的內容和子元素行為就像表格儲存格。
display: flex;
元素變成一個彈性盒容器。它本身行為就像一個區塊元素。
它的子元素會變成彈性盒項目。
display: inline-flex;
元素同時具有內嵌和彈性盒元素的特性
- 內嵌因為元素行為就像簡單文字，並插入在文字區塊中
- 彈性盒因為它的子元素會變成彈性盒項目
例如，這個元素有
.element{
height: 3em;
width: 120px;
}
display: grid;
元素變成一個網格容器。它本身行為就像一個區塊元素。
它的子元素會變成網格項目。
display: inline-grid;
元素同時具有內嵌和網格元素的特性
- 內嵌因為元素行為就像簡單文字，並插入在文字區塊中
- 網格因為它的子元素會變成彈性盒項目
例如，這個元素有
.element{
height: 3em;
width: 120px;
}