<div>是HTML標簽中最常用的容器元素之一，它用于在網頁中定義一個區域，并且可以用來繪制矩形。利用<div>標簽的特性，我們可以使用CSS來設置矩形的樣式，包括寬度、高度、邊框顏色、背景色等等。在本文中，我們將通過幾個代碼案例詳細說明如何使用<div>標簽繪制矩形。
，我們來看一個簡單的代碼示例。以下代碼會在網頁中創建一個寬度為300像素、高度為200像素的矩形，并設置矩形的背景色為紅色：

代碼示例1：

<div style="width: 300px; height: 200px; background-color: red;"></div>

從上述代碼中可以看出，我們使用style屬性來設置<div>標簽的樣式。通過設置width屬性和height屬性，我們可以確定矩形的寬度和高度。而background-color屬性則用于設置矩形的背景色。
接下來，我們來看一個稍微復雜一些的例子。以下代碼會繪制一個寬度為450像素、高度為250像素的矩形，其中邊框顏色為藍色，邊框寬度為3像素，并且矩形內部有一段文字：

代碼示例2：

<div style="width: 450px; height: 250px; border: 3px solid blue;">
<p>這是一個矩形</p>
</div>

在上述代碼中，我們使用border屬性來設置矩形的邊框樣式。其中，3px solid blue表示邊框寬度為3像素，邊框樣式為實線，邊框顏色為藍色。另外，我們在<div>標簽內部嵌套了一個

標簽，用于添加一段文字內容。
此外，我們還可以利用<div>標簽的特性來繪制多個矩形，并設置它們的位置和間距。以下代碼展示了兩個矩形，它們分別位于網頁的左上角和右上角，并且之間有一定的間距：

代碼示例3：

<style>
.rectangle {
width: 200px;
height: 150px;
border: 2px solid green;
margin: 20px;
display: inline-block;
}
</style>
<br>
<div class="rectangle"></div>
<div class="rectangle"></div>

在上述代碼中，我們使用了一個名為.rectangle的CSS類來統一設置矩形的樣式。通過指定display: inline-block，我們可以讓兩個矩形在同一行顯示，并且設置了margin屬性來控制它們之間的間距。
一下，通過使用<div>標簽，我們可以方便地繪制矩形，并根據需要設置它們的樣式。以上的示例代碼只是介紹了一些基本的用法，實際上<div>標簽還有更多強大的特性和用法，可以根據具體需求進行擴展和調整。希望本文對你理解<div>繪制矩形有所幫助！</div>