CSS是一種用于定義網頁樣式的語言，其中之一的功能就是設置div元素的百分比寬度。通過設置百分比，我們可以根據父元素的寬度自動調整div的大小，從而實現響應式的布局。在本文中，我們將通過幾個代碼案例詳細解釋如何使用CSS來設置div的百分比寬度。
第一個案例是最基礎的例子，我們將div的寬度設置為父元素寬度的一半。在HTML中，我們需要創建一個父元素，可以是一個包含div元素的容器div或者其他塊級元素。然后，我們在CSS中使用百分比來設置div的寬度，如下所示：

<p>案例1：設置div寬度為父元素寬度的一半</p>
<pre>
HTML代碼：
<div class="container">
<div class="child"></div>
</div>
<br>
CSS代碼：
.container {
width: 50%;
}
<br>
.child {
width: 100%;
height: 100px;
background-color: #f1f1f1;
}

在這個案例中，我們將容器div的寬度設置為50%，即父元素寬度的一半。子元素的寬度被設置為100%，這樣子元素就會撐滿整個容器的寬度。我們還設置了子元素的高度和背景顏色，以便更好地展示效果。
接下來，我們來看一個稍微復雜一些的案例，其中包含了多個div元素的嵌套。在這個案例中，我們將通過設置嵌套的div元素的百分比寬度來實現多列布局。代碼如下：

案例2：實現多列布局

HTML代碼：
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<br>
CSS代碼：
.container {
width: 100%;
display: flex;
}
<br>
.left {
width: 30%;
height: 200px;
background-color: #f1f1f1;
}
<br>
.right {
width: 70%;
height: 200px;
background-color: #dcdcdc;
}

在這個案例中，我們設置容器div的寬度為100%，然后使用display: flex;來實現多列布局。左側的div元素的寬度設置為30%，右側的div元素的寬度設置為70%。注意，這里的百分比是相對于容器div的寬度來計算的。
以上兩個案例展示了如何通過CSS來設置div的百分比寬度。這些案例提供了一些基本的示例，你可以根據實際需求進行擴展和調整。在實際應用中，你可能會碰到更加復雜的布局和樣式需求，但基本原理都是類似的，只需根據情況進行相應的調整。