<div 相對長度是一種CSS屬性，可以用來定義元素的尺寸相對于其父元素的尺寸。相對長度的使用可以使網頁在不同設備上保持一致的布局和比例。
通過使用相對長度，我們可以讓元素的尺寸隨著父元素的尺寸自動調整，實現響應式布局。相對長度的單位包括百分比（%）、em、rem和vw/vh。
使用百分比來設置一個元素的寬度時，該寬度是相對于其父元素的寬度。例如，如果一個元素的父元素的寬度是500像素，我們可以使用50%將元素的寬度設置為250像素。
下面的代碼示例展示了如何使用百分比來設置一個元素的寬度和高度：

<div style="width: 50%; height: 50%;">
這是一個使用百分比設置寬度和高度的<div>元素。
</div>

當我們使用百分比來設置元素的尺寸時，無論父元素的尺寸如何變化，元素的尺寸都會相應地調整。這使得網頁可以在不同的設備上以一致的比例顯示，提供更好的用戶體驗。
除了百分比，我們還可以使用em和rem相對長度單位。em單位相對于元素的字體大小進行計算，可以根據元素的字體大小來動態調整尺寸。rem單位相對于根元素的字體大小進行計算，常用于響應式布局中。如果我們將根元素的字體大小設置為16像素，那么1rem就等于16像素。
下面的代碼示例展示了如何使用em和rem來設置元素的字體大小和尺寸：

<style>
html {
font-size: 16px;
}
<br>
        .parent {
font-size: 1.5em;
}
<br>
        .child {
width: 2rem;
height: 2rem;
}
</style>
<br>
      <div class="parent">
<div class="child">
這是一個使用em和rem設置字體大小和尺寸的<div>元素。
</div>
</div>

在上面的代碼示例中，父元素的字體大小被設置為1.5em，這意味著其字體大小是根元素字體大小的1.5倍。子元素的寬度和高度被設置為2rem，這意味著其尺寸是根元素字體大小的2倍。
最后，我們還可以使用vw（視窗寬度）和vh（視窗高度）來定義元素的尺寸。vw單位相對于視窗的寬度進行計算，vh單位相對于視窗的高度進行計算。例如，如果視窗的寬度是1000像素，我們可以使用50vw將元素的寬度設置為500像素。
下面的代碼示例展示了如何使用vw和vh來設置元素的尺寸：

<div style="width: 50vw; height: 50vh;">
這是一個使用vw和vh設置寬度和高度的<div>元素。
</div>

使用相對長度單位可以幫助我們創建靈活的布局，使網頁在不同設備上都有良好的展示效果。通過理解和靈活運用相對長度，我們可以更好地控制元素的尺寸和比例，提升用戶體驗。