在網頁開發中，<div>是一個常用的HTML元素，用于創建一個可以容納其他HTML元素的容器。而控制<div>元素的大小是網頁布局中的一個重要方面。本文將通過幾個代碼案例詳細介紹如何使用CSS來控制<div>元素的大小。

案例一：固定寬度

要設置<div>元素的固定寬度，可以使用CSS的width屬性。例如，要將<div>元素的寬度設置為300像素，可以使用以下代碼：

<div style="width: 300px;">
這是一個固定寬度的<div>元素。
</div>

在上述代碼中，使用了內聯樣式將<div>元素的寬度設置為300像素。

案例二：百分比寬度

要將<div>元素的寬度設置為相對于其父元素的百分比，可以使用CSS的width屬性。例如，要將<div>元素的寬度設置為父元素寬度的50%，可以使用以下代碼：

<div style="width: 50%;">
這是一個百分比寬度的<div>元素。
</div>

在上述代碼中，width屬性的值為50%，表示<div>元素的寬度是其父元素寬度的一半。

案例三：最大寬度

有時候需要設置<div>元素的最大寬度，以確保在網頁窗口過小時，<div>元素不會超出界限。可以使用CSS的max-width屬性。例如，要將<div>元素的最大寬度設置為500像素，可以使用以下代碼：

<div style="max-width: 500px;">
這是一個最大寬度為500像素的<div>元素。
</div>

在上述代碼中，max-width屬性的值為500像素，表示<div>元素的寬度不會超過500像素。

案例四：填滿剩余空間

有時候需要將<div>元素的寬度設置為剩余空間的大小，可以使用CSS的flex屬性。以下是一個示例代碼：

<div style="display: flex;">
<div style="flex-grow: 1;">左側內容</div>
<div style="flex-grow: 2;">右側內容</div>
</div>

在上面的代碼中，父<div>元素的display屬性設置為flex，表示此<div>元素使用彈性布局。分別設置兩個子<div>元素的flex-grow屬性為1和2，表示左側內容的寬度是右側內容寬度的一半。

通過以上幾個案例，我們可以靈活控制<div>元素的大小，從而實現各種網頁布局效果。