2021年CSS面試題 CSS（層疊樣式表）是前端開發中必不可少的一部分，面試中也難免會涉及到相關的問題。以下是一些2021年CSS面試題的匯總，供您參考。

1. 解釋以下幾個CSS屬性的作用：box-sizing、clearfix、flexbox。

box-sizing - 控制盒模型的計算方式，有兩個值：border-box（寬高包括邊框和填充，不包括外邊距）和content-box（寬高只包括內容，不包括邊框、填充和外邊距）。
clearfix - 用于清除浮動元素帶來的影響，避免掉落和重疊等問題。
flexbox - 彈性盒模型，用于更靈活地布局元素。可以通過flex容器和flex項目來控制元素的排列方式和間距等屬性。

2. 如何讓一個元素在頁面居中顯示？

可以使用以下方法：
（1）設置元素的橫向和縱向位置都為50%然后用transform進行平移
例如：
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
（2）使用flexbox，讓父級容器為display: flex，然后通過justify-content和align-items屬性來控制元素的水平與垂直居中。
例如：
.parent {
display: flex;
justify-content: center;
align-items: center;
}

3. 如何實現響應式布局？

響應式布局是通過媒體查詢@media來實現的，根據不同的屏幕尺寸設置不同的CSS樣式，使得網頁能夠在各種設備上自適應，達到最佳瀏覽效果。
例如，下面的CSS代碼可以實現：當瀏覽屏幕寬度小于500px時，將body的背景顏色改為黃色。
@media screen and (max-width: 500px) {
body {
background-color: yellow;
}
}

4. 如何使用CSS實現動畫效果？請提供一個例子。

CSS動畫是通過keyframes關鍵幀來控制元素的動畫效果，將每個時間點上的CSS樣式組合起來，可以實現多種動畫效果。
例如，下面的CSS代碼可以實現文字從透明度為0到1的顯現效果。
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
animation: fadeIn 1s;
}

5. 你了解CSS預處理器嗎？請舉例說明。

CSS預處理器可以擴展CSS語言的功能，幫助開發者更方便地編寫CSS樣式，提高代碼復用率和維護性。
常見的CSS預處理器有Sass和Less等。例如，Sass中可以使用以下代碼來定義一個變量和使用嵌套語法簡化代碼。
$main-color: #ff0000;
.container {
background-color: $main-color;
h1 {
font-size: 24px;
font-weight: bold;
}
}

以上是2021年CSS面試題的一些樣例，希望對您有所幫助。