<div>框大小是指在HTML中使用<div>標簽創建的元素的寬度和高度。通過設置<div>的樣式屬性，我們可以控制框的大小，使其適應不同的布局需求。下面將通過幾個代碼案例來詳細解釋和說明。
第一個案例是設置<div>的固定大小。我們可以通過設置<style>標簽中的width和height屬性來實現。下面是一個示例：

<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<div class="box"></div>

上述代碼中，我們創建了一個樣式類.box，其中設置了寬度為200像素，高度為100像素，并且將背景顏色設置為淺藍色。然后，在<div>標簽中添加了class="box"屬性，使其應用這個樣式類。這樣，該<div>元素的大小將被限定為200像素寬和100像素高。
第二個案例是設置<div>的百分比大小。通過使用百分比作為寬度和高度的值，我們可以根據父元素的大小自適應調整<div>的大小。下面是一個示例：

<style>
.wrapper {
width: 500px;
height: 300px;
background-color: lightgray;
}
.box {
width: 50%;
height: 50%;
background-color: lightblue;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>

在上述代碼中，我們創建了一個父容器<div>，將其寬度設置為500像素，高度設置為300像素，并將背景顏色設置為淺灰色。然后，我們創建了一個子容器<div>，并將其寬度和高度都設置為50%。這樣，子容器的大小將自動調整為父容器大小的一半。
第三個案例是使用CSS的calc()函數來計算<div>的大小。這個函數可以用于執行簡單的數學運算，例如加法、減法、乘法和除法。下面是一個示例：

<style>
.box {
width: calc(100% - 20px);
height: calc(100% - 40px);
padding: 10px;
background-color: lightblue;
}
</style>
<div class="box"></div>

在上述代碼中，我們創建了一個樣式類.box，將其寬度設置為除去20像素之外的100%，將其高度設置為除去40像素之外的100%。這樣，<div>元素的大小將自動計算為其容器大小減去指定的像素值。此外，我們還設置了內邊距為10像素，并將背景顏色設置為淺藍色。
通過上述案例，我們了解了如何使用CSS來控制<div>框的大小。無論是固定大小、百分比大小還是使用calc()函數計算大小，這些方法都能夠滿足各種布局需求，使頁面元素呈現出合適的大小。