在前端開發(fā)面試中，CSS 常見布局是面試中的必考點(diǎn)之一，它能夠衡量一個前端開發(fā)者對布局與樣式掌握的熟練程度，也是日常工作中需要掌握的技能。以下是幾種比較常見的布局方式和面試題。

1. 浮動布局

.box{
float: left;
}

浮動布局是一種常見的網(wǎng)頁布局方式，實(shí)現(xiàn)簡單，兼容性較好。但在復(fù)雜的布局下，需要使用清除浮動的技巧，否則會影響到下一個元素的布局。

2. 定位布局

.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

定位布局可以讓元素相對于父元素進(jìn)行定位，還可以使用絕對定位使元素相對于文檔進(jìn)行定位。但在頁面尺寸改變時，需要重新計算定位值，靈活性不如其他布局方式。

3. Flexbox 布局

.container{
display: flex;
}
.box{
flex: 1;
}

Flexbox 布局是 CSS3 新增的一種彈性布局方式，可以讓容器內(nèi)的子元素實(shí)現(xiàn)自適應(yīng)排列。但需要注意的是，兼容性不如其他布局方式，需要使用 vendor prefix。

4. Grid 布局

.container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 50px;
}
.box{
grid-column: 1 / 2;
grid-row: 1 / 2;
}

Grid 布局是 CSS3 新增的一種網(wǎng)格布局方式，可以讓容器內(nèi)的子元素實(shí)現(xiàn)自適應(yīng)排列。但兼容性不如其他布局方式，需要使用 vendor prefix。

5. 多列布局

.container{
column-count: 3;
column-gap: 20px;
}
.box{
break-inside: avoid;
}

多列布局可以讓文本內(nèi)容在多個列中排列，使用起來簡單方便。但需要注意的是，在實(shí)際開發(fā)中需要處理好多列文本寬度的計算以及內(nèi)容適應(yīng)處理等問題。

綜上所述，在實(shí)際的前端開發(fā)中，選擇適合的布局方式能提高開發(fā)效率和頁面性能，幫助構(gòu)建滿足用戶需求的頁面。