CSS是前端開發中必不可少的一部分。它可以讓我們更加靈活地控制頁面布局和樣式。以下是CSS中常用的布局代碼：

/* 居中布局 */
.center{
margin: 0 auto;
text-align: center;
}
/* 兩欄布局 */
.left{
float: left;
width: 200px;
}
.right{
float: right;
width: calc(100% - 200px);
}
/* 三欄布局 */
.left{
float: left;
width: 200px;
}
.right{
float: right;
width: 200px;
}
.center{
margin: 0 200px;
}
/* 響應式布局 */
/* 當屏幕寬度小于600px時，調整布局 */
@media screen and (max-width: 600px) {
.left{
float: none;
width: auto;
}
.right{
float: none;
width: auto;
}
.center{
margin: 0;
}
}
/* 網格布局 */
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item{
border: 1px solid black;
padding: 10px;
}
/* 彈性盒布局 */
.container{
display: flex;
justify-content: space-between;
align-items: center;
}
.item{
border: 1px solid black;
padding: 10px;
flex: 1;
}
/* 浮動布局 */
.container{
overflow: auto;
}
.item{
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 10px;
}

以上代碼只是一些常用的布局代碼，具體的使用還需要根據實際情況進行調整。掌握這些布局代碼將有助于我們更好地完成頁面布局和響應式設計。