<div>是一種在HTML中常用的標簽，它用于創建一個容器，用來放置文檔的各個部分。而<div>標簽的屬性之一就是百分比，它可以用來設置<div>元素的寬度和高度的百分比值。使用百分比可以使得<div>元素能夠根據容器的大小進行自適應調整，從而實現響應式布局的效果。
下面我們通過幾個代碼案例來詳細解釋說明<div>百分比的用法。
案例一： 假設我們有一個父容器，寬度為800px。我們在父容器中創建一個子容器，并設置子容器的寬度為50%。代碼如下所示：

<div style="width:800px">
<div style="width:50%">
這是子容器
</div>
</div>

在這個案例中，子容器的寬度會自動根據父容器的寬度進行調整，確保子容器的寬度始終是父容器寬度的一半。
案例二： 假設我們有一個父容器，高度為400px，并且設置為相對定位。我們在父容器中創建兩個子容器，并分別設置寬度為50%和高度為50%。代碼如下所示：

<div style="position:relative; height:400px;">
<div style="width:50%; height: 50%; background-color: red;">
這是子容器1
</div>
<div style="width:50%; height: 50%; background-color: blue;">
這是子容器2
</div>
</div>

在這個案例中，子容器1和子容器2的寬度和高度分別為父容器寬度和高度的一半，從而實現了兩個平分父容器的效果。
案例三： 假設我們有一個父容器，寬度為100%。我們在父容器中創建一個子容器，并設置子容器的寬度為50%。同時，在子容器中再創建一個子容器，并設置寬度為50%。代碼如下所示：

<div style="width:100%">
<div style="width:50%">
這是子容器1
<div style="width:50%">
這是子容器2
</div>
</div>
</div>

在這個案例中，子容器2的寬度會自動根據父容器和父容器寬度的百分比進行計算，確保子容器2的寬度始終是父容器寬度的四分之一。
以上就是關于<div>百分比的幾個代碼案例的詳細解釋。通過使用百分比，我們可以非常靈活地進行布局設計，實現豐富多樣的頁面效果。無論是響應式布局還是適應性布局，百分比都是一個非常重要和實用的屬性。希望本文的內容能對您理解和運用<div>百分比起到一定的幫助和指導作用。