** 通過display中的none和block **
在前端開發中，display: none 和 display: block 是兩種常用的 CSS 顯示模式，核心區別在于：是否在頁面中保留元素的占位空間

1. 核心區別

屬性	display: none	display: block
占位空間	元素完全從渲染樹中移除，不占據空間	元素作為塊級元素顯示，獨占一行，占據空間
子元素	所有子元素也會被隱藏，無法交互	子元素正常顯示，可交互
重排重繪	觸發重排（reflow）和重繪（repaint）	僅在首次渲染或布局變化時觸發
過渡動畫	不支持過渡效果（直接消失/顯示）	支持寬度、高度等屬性的過渡動畫
無障礙	屏幕閱讀器無法訪問	正常訪問

2. 應用場景

（1）display: none

• 臨時隱藏元素：如模態框關閉、下拉菜單收起。
• 條件渲染：根據用戶交互或數據狀態決定是否顯示元素。
• 性能優化：在不需要顯示的元素上使用，減少渲染負擔。

（2）display: block

• 強制元素換行：如將 <span> 轉為塊級元素。
• 創建獨立容器：如 <div>、<p> 等默認塊級元素。
• 與 display: none 配合：實現元素的顯示/隱藏切換。

3. 示例代碼

（1）顯示/隱藏切換

<button onclick="toggleElement()">切換顯示</button>
<div id="target" style="background: lightblue;">內容</div><script>
function toggleElement() {const element = document.getElementById('target');element.style.display = element.style.display === 'none' ? 'block' : 'none';
}
</script>

（2）轉為塊級元素

span {display: block; /* 將內聯元素轉為塊級元素，獨占一行 */margin-bottom: 10px;
}

4. 替代方案

（1）visibility: hidden

• 區別：元素隱藏但仍占據空間，子元素同樣隱藏但可通過 JavaScript 訪問。
• 應用：需要保留布局占位的場景（如表格中的某列臨時隱藏）。

（2）opacity: 0

• 區別：元素完全透明，但仍在頁面中占據空間且可交互。
• 應用：需要元素仍能接收點擊事件的場景（如加載蒙層）。

5. 性能考慮

• 頻繁切換：display: none/block 會觸發重排，頻繁操作可能影響性能，建議優先使用 opacity 或 visibility。
• 動畫效果：若需要平滑過渡，可使用 opacity 配合 transition，而非直接切換 display。

總結

場景	推薦屬性	原因
完全移除元素且不保留空間	display: none	徹底從渲染樹中移除
隱藏元素但保留占位	visibility: hidden	保留布局空間，無障礙問題
透明效果但仍可交互	opacity: 0	元素仍在頁面中，可接收事件