<div>相對寬度是指元素寬度相對于其父級元素寬度的一種設置方式。通過將元素的寬度設置為百分比的值，可以實現相對寬度的效果。這樣的設置允許元素根據其父級元素的大小自適應調整寬度，從而實現響應式布局。下面通過幾個代碼案例來詳細說明<div>相對寬度的使用方法和表現效果。
，我們來看一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 400px;
height: 200px;
background-color: lightblue;
}
<br>
.child {
width: 50%;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="child"></div>
</div>
<br>
</body>
</html>在這個案例中，我們創建了一個父級<div>元素，設置了寬度為400px，高度為200px，并且給其背景顏色設置為淺藍色。然后再創建一個子級<div>元素，并對其設置了寬度為50%，高度為100px，以及背景顏色為淺綠色。
當我們在瀏覽器中打開這個例子時，可以看到子級<div>元素的寬度會自動根據父級<div>元素的寬度進行調整，使其占據父級元素寬度的50%。這個例子展示了相對寬度的基本用法。
接下來，我們再來看一個更復雜的例子，涉及到嵌套的<div>元素：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 400px;
height: 200px;
background-color: lightblue;
}
<br>
.child {
width: 50%;
height: 100px;
background-color: lightgreen;
}
<br>
.grandchild {
width: 75%;
height: 50px;
background-color: lightpink;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="child">
<div class="grandchild"></div>
</div>
</div>
<br>
</body>
</html>在這個例子中，我們創建了一個父級<div>元素和一個子級<div>元素，上述代碼與前一個例子相似。但是，我們還添加了一個更深層級的孫級<div>元素，并對其設置了寬度為75%，高度為50px，以及背景顏色為淺粉色。
當我們在瀏覽器中打開這個例子時，可以看到孫級<div>元素的寬度會根據子級<div>元素的寬度進行調整，使其占據子級元素寬度的75%。而子級<div>元素的寬度則會根據父級<div>元素的寬度進行調整，使其占據父級元素寬度的50%。這個例子展示了<div>相對寬度在嵌套結構中的表現。
而言，<div>相對寬度是一種方便實現響應式布局的方法。通過將元素寬度設置為百分比的值，可以使元素根據父級元素的大小進行自適應調整。在嵌套結構中，子級和孫級元素的寬度也可以通過相對寬度的方式進行設置，實現層層適應父級元素寬度的效果。