<div>層是HTML中的一個標簽，用于在頁面中創建一個獨立的區域。可以通過設置樣式和屬性來控制<div>層的大小。本文將通過幾個代碼案例來詳細解釋如何控制<div>層的大小。
第一個案例是通過CSS設置<div>層的寬度和高度。在CSS中，可以使用width屬性來設置<div>層的寬度，使用height屬性來設置<div>層的高度。例如，以下代碼將創建一個寬度為200像素，高度為100像素的<div>層：

<style>
div {
width: 200px;
height: 100px;
}
</style>
<div></div>

在上面的代碼中，通過將width屬性設置為200px，height屬性設置為100px，來控制<div>層的大小。
第二個案例是通過使用百分比來設置<div>層的大小。通過設置width和height屬性為百分比值，可以使<div>層根據父元素的大小自動縮放。例如，以下代碼將創建一個寬度為50%父元素寬度，高度為50%父元素高度的<div>層：

<style>
div {
width: 50%;
height: 50%;
}
</style>
<div></div>

在上面的代碼中，通過將width和height屬性設置為50%，使<div>層的大小始終為父元素大小的50%。
第三個案例是通過使用JavaScript動態設置<div>層的大小。通過使用JavaScript，可以根據需要在運行時更改<div>層的大小。例如，以下代碼將創建一個初始寬度為200像素，高度為100像素的<div>層，并且當鼠標懸停在<div>層上時，會將其寬度擴展為400像素，高度擴展為200像素：

<style>
div {
width: 200px;
height: 100px;
background-color: #ccc;
transition: width 0.5s, height 0.5s;
}
</style>
<script>
function expandDiv() {
var div = document.getElementById("myDiv");
div.style.width = "400px";
div.style.height = "200px";
}
</script>
<div id="myDiv" onmouseover="expandDiv()"></div>

在上面的代碼中，通過設置onmouseover事件和對應的JavaScript函數，當鼠標懸停在<div>層上時，會調用expandDiv()函數，將<div>層的寬度和高度擴展為400像素和200像素。
通過以上幾個案例，我們可以看到通過CSS和JavaScript可以靈活地控制<div>層的大小。通過設置width和height屬性，可以靜態地控制<div>層的大小；通過使用百分比，可以使<div>層根據父元素大小自動縮放；通過JavaScript動態設置width和height屬性，可以在運行時根據需要更改<div>層的大小。使用這些方法，可以根據頁面設計的需求，靈活地控制<div>層的大小。