CSS作為網頁樣式語言，有著廣泛、靈活的應用。其中，利用CSS實現div自適應布局是常見的一種應用方式。下面通過一個實例來介紹如何實現div的自適應布局。

首先，在HTML文件中創建一個div元素，給它一個類名作為標識。

<div class="my-div"></div>

接下來，在CSS文件中給這個div元素添加樣式規則，使它可以自適應寬度和高度。

.my-div {
width: 100%;
height: auto;
}

通過設置width為100%，可以使這個div元素的寬度自適應屏幕的寬度大小。而height設置為auto，則可以讓高度隨內容的多少而自適應增長。

通過這樣的設置，我們可以實現一個基礎的自適應div。不過在實際應用中，我們往往需要更加復雜的布局。例如，需要在一個div中放置多個子元素，并對它們進行自適應布局。

在這種情況下，我們可以利用CSS中的Flex布局來方便實現。Flex布局可以自動分配元素的寬度和高度，從而實現靈活的布局效果。

.my-div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

上面的樣式代碼將div元素的布局屬性設置為Flex布局，并通過flex-wrap屬性讓它在寬度不足的情況下自動換行。通過justify-content屬性設置對齊方式，align-items屬性設置垂直居中方式，即可實現多元素自適應布局。

總之，利用CSS實現div自適應布局是一個非常實用的技巧，在網頁制作中經常會用到。通過深入學習和掌握CSS技巧，我們可以實現更加實用和炫酷的網頁效果。