<div>是HTML中的常用標簽，用來在文檔中創建一個容器，可用于顯示各種元素，如文本、圖像、表格等。在CSS中，我們可以通過設置<div>的樣式來控制其外觀和布局，以達到我們想要的效果。本文將通過幾個代碼案例，詳細解釋如何使用<div>和CSS來創建各種控件。
，我們來創建一個簡單的按鈕控件。我們可以使用<div>標簽作為按鈕的容器，并為其設置一個類名，以便能夠通過CSS選擇器來選擇并設置樣式。下面是一個示例代碼：

<style>
.button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
</style>
<br>
<div class="button">Click me!</div>

在上面的代碼中，我們通過設置<div class="button">的樣式，實現了一個綠色的背景、白色的文字、圓角和鼠標懸停時的手勢等效果。你可以將該代碼復制到一個網頁中并運行，看看效果是怎樣的。
接下來，讓我們來創建一個表單控件 - 文本框。我們可以使用<div>作為外層容器，然后在其中添加一個<input>標簽作為文本框。下面是一個示例代碼：

<style>
.textbox {
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
border-radius: 3px;
}
</style>
<br>
<div class="textbox">
<input type="text" placeholder="請輸入文本">
</div>

在上面的代碼中，我們通過設置<div class="textbox">的樣式，實現了一個有邊框、圓角的文本框。我們還給<input>標簽添加了一個placeholder屬性，用于顯示文本框中的提示信息。
最后，我們來創建一個進度條控件。這個控件通常用于顯示任務的完成進度。我們可以使用<div>作為進度條容器，并在其中添加一個<div>作為進度條的顯示區域。下面是一個示例代碼：

<style>
.progress-bar {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
}
<br>
    .progress {
height: 20px;
background-color: #4CAF50;
border-radius: 5px;
}
</style>
<br>
<div class="progress-bar">
<div class="progress" style="width: 50%"></div>
</div>

在上面的代碼中，我們通過設置<div class="progress-bar">和<div class="progress">的樣式，實現了一個有邊框、綠色的進度條。進度條的寬度可以通過設置<div class="progress">的style屬性來調整。
通過以上幾個代碼案例，我們可以看到<div>和CSS的強大之處。通過設置不同的樣式，我們可以將<div>轉化為各種各樣的控件，從而滿足不同的設計需求。希望本文對你了解<div>和CSS控件的使用有所幫助。如果你對其他控件的創建有興趣，不妨深入學習一下<div>和CSS的相關知識。