在Web前端開發中，CSS是不可或缺的一部分，能夠用CSS精確的控制html元素的位置和樣式，是每位前端工程師必須掌握的技能。而div是最常用的html元素之一，它可以代表一個區塊，并且可以通過CSS樣式對其進行美化。

下面我們來模擬一下CSS div考試題：

/* CSS代碼 */
div {
width: 200px; 
height: 200px; 
background-color: #f0f0f0; 
position: relative; 
}
div:before {
content: ''; 
display: block; 
position: absolute; 
top: 0; 
left: 0; 
width: 50%; 
height: 100%; 
background-color: #aaa; 
}
div:after {
content: ''; 
display: block;
position: absolute; 
top: 0; 
left: 50%; 
width: 50%; 
height: 100%; 
background-color: #555;
}

請問以上代碼實現了什么效果？

答案：

以上代碼實現了一個寬度為200px，高度為200px的灰色正方形div，div內左側50%為灰色，右側50%為深灰色。

簡要解釋：

div:before和div:after是CSS偽元素，通過它們可以在元素前后添加內容。在本例中，div:before添加的灰色區塊占據的是整個div的50%，而div:after添加的深灰色區塊占據的是整個div的另外50%。同時，div的position屬性設置為relative，div:before和div:after的position屬性設置為absolute，則偽元素相對于div本身進行定位。

CSS div的考試題經常出現，大家在平時學CSS的時候，一定要多多練習，熟練掌握各種樣式及其運用！