在前端面試的過程中，CSS 也是必不可少的一部分。下面是一些 CSS 面試題目的整理。

1、如何居中一個元素？

/* 水平居中 */
.element {
width: 200px;
margin: 0 auto;
}
/* 垂直居中 */
.element {
height: 200px;
display: flex;
align-items: center;
}
/* 水平垂直居中 */
.element {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

2、如何清除浮動？

.clearfix::after {
content: "";
display: table;
clear: both;
}

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

/* 設置根字體大小 */
html {
font-size: 16px;
}
@media screen and (min-width: 768px) {
/* 在大屏幕下修改根字體大小 */
html {
font-size: 20px;
}
}
/* 使用相對布局 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* 使用彈性布局，實現列數變化 */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main__item {
width: calc(100% / 2 - 20px);
margin: 10px;
}
@media screen and (min-width: 768px) {
.main__item {
width: calc(100% / 3 - 20px);
margin: 10px;
}
}
@media screen and (min-width: 1200px) {
.main__item {
width: calc(100% / 4 - 20px);
margin: 10px;
}
}

4、CSS 的盒模型有哪些？

CSS 盒模型有兩種：標準盒模型和怪異盒模型。

/* 標準盒模型：width 和 height 只包含內容的寬高 */
* {
box-sizing: content-box;
}
/* 怪異盒模型：width 和 height 包含內容、內邊距、邊框的寬高 */
* {
box-sizing: border-box;
}

5、display 屬性有哪些值？

display 屬性的常用值有：block、inline、inline-block、flex、grid、none 等。

6、position 屬性有哪些值？

position 屬性有 static、relative、absolute、fixed、sticky 等。

以上是一些關于 CSS 的面試題目的整理，希望對大家有幫助。