在前端開發中，CSS布局技巧是十分重要的。正確的CSS布局能夠讓網頁更加美觀、易于閱讀，同時也能夠提升用戶體驗。以下是一些常用的CSS布局技巧：

/*使用 Flexbox 布局*/
.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
/*使用 Grid 布局*/
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px; /*網格之間的間距*/
}
/*使用 Float 屬性實現多列布局*/
.left-column {
float: left;
width: 30%;
}
.right-column {
float: right;
width: 70%;
}
/*使用 Absolute 定位實現層疊效果*/
.container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /*半透明黑色*/
}
/*響應式布局*/
@media screen and (max-width: 768px) {
.container {
flex-direction: column; /*改為縱向排列*/
}
.left-column,
.right-column {
width: 100%; /*改為100%寬度*/
}
}

以上是一些基本的CSS布局技巧，還有許多其他高級的布局方法，需要根據實際需求靈活運用。正確地使用CSS布局，將有助于優化網站、提升用戶體驗。