CSS的<div>標簽是HTML中的一個非常重要的元素，用于定義一個文檔中的一個獨立的區域，可以用來顯示文本、圖像、視頻或其他任何內容。<div>標簽允許開發者使用CSS樣式來控制其外觀、大小和位置。本文將詳細介紹如何使用CSS來控制<div>元素的大小。

案例一：固定大小的<div>元素

，我們來創建一個固定大小的<div>元素，寬度為200像素，高度為100像素。

.div-example {
width: 200px;
height: 100px;
background-color: lightblue;
}

上述代碼中，我們創建了一個名為<div class="div-example">的<div>元素，并使用CSS選擇器將其樣式定義為寬度為200像素，高度為100像素，背景顏色為淺藍色（lightblue）。

案例二：比例寬高的<div>元素

有時，我們希望<div>元素的寬度和高度之間保持某種比例。這可以通過使用百分比值來實現。例如，我們希望<div>元素的寬度是其父元素寬度的50%，高度是寬度的一半。

.div-example {
width: 50%;
height: 50%;
background-color: lightblue;
}

在上述代碼中，寬度和高度屬性的值均為百分比。由于寬度和高度都是基于父元素的大小計算的，所以可以實現寬高比例。

案例三：響應式<div>元素

在現代的響應式網頁設計中，<div>元素的大小經常需要根據視口的大小自動調整。這可以通過使用相對單位和媒體查詢來實現。

.div-example {
width: 80%;
height: 200px;
background-color: lightblue;
}
<br>
@media (max-width: 768px) {
.div-example {
width: 100%;
height: 100px;
}
}

在上述代碼中，我們使用相對單位（百分比）將<div>元素的寬度設置為視口寬度的80%，高度設置為200像素。然后，在媒體查詢部分，我們使用max-width屬性來指定當視口的寬度小于等于768像素時，要將<div>元素的寬度設置為100%，高度設置為100像素。

通過這樣的設置，我們可以讓<div>元素相對于不同的設備和屏幕大小有不同的大小，并保持良好的可視性。

在本文中，我們介紹了三個案例，展示了如何使用CSS的寬度和高度屬性來控制<div>元素的大小。無論是固定大小的<div>元素，還是具有比例寬高或響應式的<div>元素，都可以通過CSS來實現。