<div> 是 HTML 中的一個標簽，用于定義一個文檔中的一個區域塊。常用于網頁布局和樣式設置。使用 CSS 可以對 <div> 標簽進行樣式的設置，包括隱藏和占位處理。在實際開發中，很多情況下需要隱藏 <div> 并保留其占位空間，即隱藏后不改變頁面布局。
<div> 標簽的隱藏可以通過設置 CSS 樣式 display 屬性為 none 來實現。當一個 <div> 元素的 display 屬性設置為 none 時，該元素將被隱藏，不在頁面上顯示。

<pre>
<div style="display: none;">
這是一個被隱藏的 div 元素。
</div>

以上代碼中的 <div> 元素將被隱藏，不會在頁面上顯示。然而，由于該元素仍然在文檔對象模型（DOM）中存在，并且保留了其占位空間，因此不會影響其他元素的布局。

<b>實例 1:</b>

考慮以下網頁布局，其中左側欄為一個 <div>元素，右側為主要內容：

<div id="sidebar" style="display: none;">
這是左側欄內容。
</div>
<br>
<div id="content">
這是主要內容。
</div>

在這個例子中，設置了左側欄的 display 屬性為 none，即隱藏了它。即使左側欄被隱藏了，右側的主要內容仍然會占據原來左側欄的位置，不會受到隱藏元素的影響。這樣可以實現在一些特定情況下，根據不同的用戶操作需求來隱藏和顯示特定的部分，而不會打亂整體布局。

<b>實例 2:</b>

考慮一個常見的場景，網頁上有一個導航欄包含多個選項卡，點擊不同的選項卡顯示不同的內容。可以利用 <div> 元素的隱藏和占位特性來實現這個交互效果。

<div id="tab1">
這是選項卡1的內容。
</div>
<br>
<div id="tab2" style="display: none;">
這是選項卡2的內容。
</div>
<br>
<div id="tab3" style="display: none;">
這是選項卡3的內容。
</div>
<br>
<button onclick="showTab(1)">選項卡1</button>
<button onclick="showTab(2)">選項卡2</button>
<button onclick="showTab(3)">選項卡3</button>

以上代碼中的選項卡通過設置 display 屬性來控制對應的內容的顯示和隱藏。點擊不同的按鈕，調用 showTab 函數，動態地設置相應內容的 display 屬性，從而實現選項卡的切換效果。即使某個選項卡被隱藏了，其他選項卡的內容仍會占據原來的位置。這種隱藏和占位的處理方式在構建動態控制的網頁元素時非常實用。

通過以上兩個實例，我們可以看到 <div> 的隱藏和占位可以通過設置 CSS 樣式 display 屬性為 none 來實現。這種隱藏方式不會改變元素的占位空間，對布局沒有影響，非常便于實現一些特定需求下的元素隱藏和顯示的效果。因此，在實際開發中，可以根據具體的需求使用這種方式來處理隱藏和占位問題，提高頁面的靈活性和用戶交互體驗。