<div 等寬高標簽，是一種在網頁設計中常用的CSS技術。div是一個HTML標簽，用于創建網頁上的區域塊。等寬高表示div的寬度和高度都是固定的，不會隨內容的變化而變化。這種技術在設計中有著很多應用，比如創建網頁的布局、制作圖片畫廊等等。下面將通過幾個實例來詳細解釋這種技術的用法。
第一個案例是一個簡單的網頁布局，其中有一個頂部導航欄和一個內容區域。導航欄和內容區域都是div元素，且具有等寬高屬性。下面是相應的HTML代碼：

<div class="nav">
導航欄內容
</div>
<br>
<div class="content">
內容區域內容
</div>

將上述HTML代碼與對應的CSS樣式表進行關聯，設置div的寬度和高度為固定值，即可實現等寬高的效果。下面是CSS代碼：

<style>
.nav {
width: 100%;
height: 50px;
}
<br>
.content {
width: 100%;
height: 500px;
}
</style>

在上述代碼中，導航欄的寬度被設置為100%，高度為50像素；內容區域的寬度也為100%，但高度為500像素。這樣一來，不論瀏覽器窗口的大小如何改變，導航欄和內容區域都會保持相同的寬度和高度。
第二個案例展示了如何使用div等寬高技術來創建一個圖片畫廊。畫廊中的每個圖片都是等寬高的div元素，這樣可以保證圖片的排列整齊。以下是HTML代碼的示例：

<div class="gallery">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
...
</div>

為了實現等寬高的效果，需要為每個圖片設置相同的CSS樣式。下面是CSS代碼的示例：

<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
<br>
.image {
width: 200px;
height: 200px;
margin: 10px;
background-image: url("image.jpg");
background-size: cover;
}
</style>

在上述代碼中，將畫廊容器設置為flex布局，使圖片能夠自動換行。每個圖片的寬度和高度都被設置為200像素，間距為10像素。通過設置背景圖片和background-size屬性，可以將具體的圖片應用到div元素上。這樣一來，無論畫廊中有多少張圖片，它們都會按照指定的寬度和高度等比例排列顯示。
通過以上兩個實例，我們可以看到div等寬高技術在網頁設計中的作用和應用。無論是創建網頁布局還是制作圖片畫廊，都可以通過設置div的寬度和高度為固定值，實現相同大小的效果。這種技術不僅可以提升網頁的美觀度，還可以增加網頁的交互性和用戶體驗。在實際應用中，可以根據具體的設計需求和效果要求，靈活運用div等寬高技術，創造出更好的網頁設計。