CSS 布局是網(wǎng)頁設(shè)計中非常重要的一部分，它能調(diào)整網(wǎng)頁的排版和格式，使網(wǎng)頁更加清晰易讀。下面介紹一些 CSS 布局的經(jīng)典例題。

/* 例題一：水平居中 */
.container {
width: 50%;
margin: 0 auto;
}
/* 例題二：兩欄布局 */
.container {
display: flex;
justify-content: space-between;
}
.col-1 {
flex-basis: 70%;
}
.col-2 {
flex-basis: 20%;
}
/* 例題三：響應(yīng)式布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: 25%;
max-width: 25%;
min-width: 200px;
}
@media screen and (max-width: 767px) {
.box {
flex-basis: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 480px) {
.box {
flex-basis: 100%;
max-width: 100%;
}
}

第一個例題是水平居中，將一個元素居中可以通過設(shè)置寬度并設(shè)置 margin-left 和 margin-right 為 auto 來實現(xiàn)。第二個例題是兩欄布局，使用 flex 布局可以快速實現(xiàn)。第三個例題是響應(yīng)式布局，通過媒體查詢實現(xiàn)不同尺寸屏幕下元素的排列方式。