在web前端開發(fā)中，CSS的應(yīng)用已經(jīng)非常廣泛。除了可以讓網(wǎng)站變得更加美觀，CSS還可以用來(lái)畫一些基本圖形。例如，我們可以使用CSS來(lái)畫室內(nèi)平面圖。

/* 繪制室內(nèi)平面圖 */
.house-plan{
width: 500px;
height: 500px;
border: 1px solid #ccc;
position: relative;
}
/* 繪制房間 */
.room{
width: 200px;
height: 200px;
border: 1px solid #333;
background-color: #f0f0f0;
position: absolute;
}
/* 繪制廚房 */
.kitchen{
left: 20%;
top: 30%;
}
/* 繪制客廳 */
.living-room{
left: 40%;
top: 20%;
}
/* 繪制臥室 */
.bedroom{
left: 60%;
top: 10%;
}
/* 繪制衛(wèi)生間 */
.bathroom{
left: 70%;
top: 45%;
}

在以上CSS代碼中，我們首先給出了整個(gè)平面圖的大小，并設(shè)置了一個(gè)相對(duì)定位的父元素。接著，我們定義了四個(gè)子元素room，它們是廚房、客廳、臥室和衛(wèi)生間。我們通過(guò)設(shè)置不同的left和top值，讓它們排布在不同的位置。

需要注意的是，我們?cè)O(shè)置了子元素room的position屬性為absolute，這是為了讓它們的位置相對(duì)于父元素house-plan進(jìn)行定位。最后，我們?cè)O(shè)置了子元素的樣式，包括邊框、背景色等。

在HTML中，我們可以這樣使用CSS代碼：

<div class="house-plan"><div class="room kitchen"></div><div class="room living-room"></div><div class="room bedroom"></div><div class="room bathroom"></div></div>

以上的HTML代碼會(huì)將四個(gè)房間放置在一個(gè)名為“house-plan”的div元素中。我們可以通過(guò)調(diào)整CSS中的left和top值，來(lái)改變每個(gè)房間的位置。這樣，我們就可以用CSS繪制出簡(jiǎn)單的室內(nèi)平面圖。