<div>和<div>都是HTML代碼中的標簽，用于定義文檔中的一個塊級區域。這兩個標簽有一個共同的特性，就是可以通過CSS樣式來修改它們的顯示方式。其中，display屬性是控制元素的顯示類型的重要屬性之一。其中一個常用的display屬性值是"none"，它用于隱藏一個元素并使它不占據空間。在本文中，我們將詳細討論如何使用display: none來隱藏<div>元素。

案例一：隱藏<div>元素

代碼如下：

<div id="myDiv">
這是一個被隱藏的<div>元素。
</div>

，我們需要在HTML文檔中定義一個<div>元素，這里給它一個id屬性為"myDiv"。然后，我們可以通過CSS來選擇這個特定的元素，并將其display屬性設為"none"，以實現隱藏的效果。

CSS代碼如下：

#myDiv {
display: none;
}

通過上述的CSS代碼，我們將id為"myDiv"的<div>元素隱藏起來了。這樣，當頁面被加載時，該<div>元素將不可見，并且不占據任何空間。

案例二：通過JavaScript動態隱藏<div>元素

有時候，我們可能需要通過JavaScript來控制<div>元素的顯示與隱藏。以下是一個使用JavaScript代碼來動態隱藏<div>元素的示例。

HTML代碼如下：

<button onclick="hideDiv()">隱藏<div></button>
<br>
<div id="myDiv">
這是一個可以通過JavaScript動態隱藏的<div>元素。
</div>

JavaScript代碼如下：

function hideDiv() {
var myDiv = document.getElementById("myDiv");
myDiv.style.display = "none";
}

在這個案例中，我們先在HTML中定義了一個按鈕，并給它添加了一個點擊事件的監聽器。當按鈕被點擊時，對應的JavaScript代碼將會執行，通過獲取id為"myDiv"的<div>元素，并將其display屬性設置為"none"，最終實現了隱藏的效果。

參考案例：谷歌首頁的Logo隱藏

這個案例涉及到真實的網站，谷歌是全球最流行的搜索引擎之一。在谷歌的首頁中，Logo是位于頂部的一個<div>元素，當用戶向下滾動頁面時，該<div>元素會自動隱藏起來，以節省頁面空間。下面是該功能的相關代碼。

HTML代碼如下：

<div id="logo">
這是谷歌的Logo
</div>

CSS代碼如下：

#logo {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: top 0.3s;
}
<br>
#logo.hidden {
top: -60px;
}

JavaScript代碼如下：

window.onscroll = function() {
var logo = document.getElementById("logo");
if (window.pageYOffset > 100) {
logo.classList.add("hidden");
} else {
logo.classList.remove("hidden");
}
};

上述代碼中，定義了一個id為"logo"的<div>元素，作為谷歌的Logo。然后，通過CSS控制其顯示與隱藏。當用戶向下滾動頁面時，JavaScript代碼會監聽滾動事件，在滾動距離超過一定值時，動態給<div>元素添加一個名為"hidden"的class，通過修改top屬性將其隱藏起來，以實現Logo在頁面滾動時的隱藏效果。

以上就是關于隱藏<div>元素的一些案例，我們可以通過修改CSS的display屬性來實現靜態隱藏，也可以通過JavaScript動態地控制顯示與隱藏。這些技巧在實際開發中都有一定的應用場景，希望能對你有所幫助！