最近，我正在備戰我的計算機科學專業的 css 期末考試。我想和大家分享其中一個考試題目：

給定以下 HTML 代碼：
<div id="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
使用 CSS 實現以下效果：
- 將 #container 設為紅色背景，高度 400 像素，寬度相對于屏幕自適應
- 將 .box 的寬度設為 100 像素，高度設為 100 像素，文本居中顯示，背景顏色為 #333，顏色為 #fff，字體大小為 24 像素
- 將前四個 .box 按順序排列成兩列兩行的網格布局，每個 .box 有 20 像素的間隔，位置居中對齊
- 將最后一個 .box 設為懸浮在左下角，位置為 #container 的左下角，與 #container 保持 10 像素的距離

這是一個相對來說不算簡單的綜合性考題，涉及到 CSS 的很多基礎知識和操作。在考試中，我可能會采用以下方式來解決這個問題：

#container {
background-color: red;
height: 400px;
}
.box {
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
font-size: 24px;
text-align: center;
}
.box:nth-child(5) {
position: absolute;
bottom: 10px;
left: 10px;
}
.box:nth-child(-n+4) {
margin: 20px;
display: inline-block;
vertical-align: center;
}
.box:nth-child(2n-1) {
clear: both;
}

如果你也正在備考 CSS 期末考試，我相信這個練習題目對你會很有幫助。加油！