在web前端開發中，CSS的應用已經非常廣泛。除了可以讓網站變得更加美觀，CSS還可以用來畫一些基本圖形。例如，我們可以使用CSS來畫室內平面圖。

/* 繪制室內平面圖 */
.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%;
}
/* 繪制衛生間 */
.bathroom{
left: 70%;
top: 45%;
}

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

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

在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代碼會將四個房間放置在一個名為“house-plan”的div元素中。我們可以通過調整CSS中的left和top值，來改變每個房間的位置。這樣，我們就可以用CSS繪制出簡單的室內平面圖。