display屬性在html和css中有8種用法：1. inline：行內元素，不獨占行，寬高無效。2. block：塊級元素，獨占行，寬高有效。3. inline-block：結合inline和block特點。4. none：隱藏元素，不占空間。5. flex：啟用flexbox布局。6. grid：啟用網格布局。7. table：模擬表格布局。8. list-item：表現為列表項。
在HTML和css的世界里，display屬性就像一個魔術師，它能讓你的網頁元素以各種方式展現自己。今天我們要聊聊這個魔術師的8種變身技巧，也就是display屬性的8種取值。準備好見識一下這個魔術了嗎？
首先要回答的問題是：display屬性在HTML和CSS中有哪些用法？display屬性定義了一個元素的顯示類型，它決定了元素在網頁布局中的行為方式。以下是display屬性的8種取值，每一種都有其獨特的用途和效果：
- inline：讓元素表現得像一個行內元素，不會另起一行，寬高設置無效。
- block：讓元素表現得像一個塊級元素，會獨占一行，寬高設置有效。
- inline-block：結合了inline和block的特點，可以設置寬高但不獨占一行。
- none：隱藏元素，不占用空間。
- flex：啟用Flexbox布局，使元素成為一個彈性容器。
- grid：啟用網格布局，使元素成為一個網格容器。
- table：讓元素表現得像一個表格。
- list-item：讓元素表現得像一個列表項。
現在，讓我們深入探討一下這些取值的具體用法和場景。
立即學習“前端免費學習筆記（深入）”；
對于inline，你可以把它想象成一個害羞的小朋友，它總是喜歡和別人擠在一起，不會獨占一行。比如說，你想讓一個元素和其他文本共處一行，就可以這樣做：
<span style="display: inline; background-color: yellow;">這是一個行內元素</span>
但是，如果你想讓一個
<div style="display: block; background-color: blue; width: 200px; height: 100px;">這是一個塊級元素</div>
有時候，你既想讓元素和別人共處一行，又想設置它的寬高，這時候inline-block就派上用場了：
<div style="display: inline-block; background-color: green; width: 100px; height: 50px;">這是一個行內塊級元素</div>
如果你想讓某個元素徹底消失，不占用任何空間，那就用none吧，這簡直是魔法中的魔法：
<div style="display: none;">這是一個隱藏的元素</div>
當你需要更靈活的布局時，flex和grid就是你的好幫手。flex布局可以讓你輕松地創建響應式布局：
<div style="display: flex; justify-content: space-around;"> <div style="background-color: red; width: 100px; height: 100px;"></div> <div style="background-color: blue; width: 100px; height: 100px;"></div> <div style="background-color: green; width: 100px; height: 100px;"></div> </div>
而grid布局則讓你可以創建復雜的二維布局：
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;"> <div style="background-color: red; height: 100px;"></div> <div style="background-color: blue; height: 100px;"></div> <div style="background-color: green; height: 100px;"></div> </div>
如果你需要在頁面上模擬表格的布局，但又不想使用
