，我們來看一下像素（px）單位。像素是屏幕顯示的基本單位，通常用于精確地指定元素的大小。例如，下面的代碼將一個(gè)div元素的寬度設(shè)置為300像素，高度設(shè)置為200像素：
<div style="width: 300px; height: 200px; background-color: red;"></div>
上述代碼中，通過設(shè)置width屬性和height屬性，分別指定了div元素的寬度和高度為300像素和200像素。這樣，該div元素在網(wǎng)頁中就會(huì)顯示一個(gè)寬度為300像素、高度為200像素的紅色方塊。
接下來，我們來看一下百分比（%）單位。百分比是相對(duì)單位，它會(huì)根據(jù)父元素的大小進(jìn)行計(jì)算。例如，下面的代碼將一個(gè)div元素的寬度設(shè)置為父元素寬度的50%，高度設(shè)置為父元素高度的50%：
<div style="width: 50%; height: 50%; background-color: blue;"></div>
在上述代碼中，通過設(shè)置width屬性和height屬性為50%，以相對(duì)于父元素的寬度和高度進(jìn)行計(jì)算。如果父元素的寬度為600像素，高度為400像素，那么該div元素的寬度就會(huì)被計(jì)算為300像素，高度會(huì)被計(jì)算為200像素。這樣，該div元素在網(wǎng)頁中就會(huì)顯示一個(gè)寬度為300像素、高度為200像素的藍(lán)色方塊。
除了像素和百分比，CSS還提供了視口寬度（vw）和視口高度（vh）這兩個(gè)相對(duì)單位。視口寬度指的是瀏覽器可視區(qū)域的寬度，而視口高度指的是瀏覽器可視區(qū)域的高度。這兩個(gè)單位可以用于對(duì)元素進(jìn)行響應(yīng)式設(shè)計(jì)。例如，下面的代碼將一個(gè)div元素的寬度設(shè)置為視口寬度的50%，高度設(shè)置為視口高度的50%：
<div style="width: 50vw; height: 50vh; background-color: green;"></div>
在上述代碼中，通過設(shè)置width屬性和height屬性為50vw和50vh，以相對(duì)于瀏覽器可視區(qū)域的寬度和高度進(jìn)行計(jì)算。如果瀏覽器可視區(qū)域的寬度為1200像素，高度為800像素，那么該div元素的寬度就會(huì)被計(jì)算為600像素，高度會(huì)被計(jì)算為400像素。這樣，該div元素在網(wǎng)頁中就會(huì)顯示一個(gè)寬度為600像素、高度為400像素的綠色方塊。
綜上所述，CSS樣式中div元素的長(zhǎng)度可以使用像素、百分比、視口寬度和視口高度這些單位進(jìn)行指定。通過合理地應(yīng)用這些單位，我們可以對(duì)網(wǎng)頁中的元素靈活地進(jìn)行布局和設(shè)計(jì)。