CSS 布局是網(wǎng)頁設(shè)計中一個非常重要的部分，而常見的布局方式有如下幾種：
1. 浮動布局
浮動布局是 CSS 中最常用的布局方式之一。通過設(shè)置元素的 float 屬性，讓元素浮動到頁面的左邊或右邊，實(shí)現(xiàn)頁面布局。
示例代碼：

.container {
width: 960px;
margin: 0 auto;
}
.box {
float: left;
width: 200px;
margin-right: 20px;
}

2. 盒模型布局
盒模型布局是以頁面中盒子為布局基礎(chǔ)的一種布局方式。通過設(shè)置 margin、padding、border 等屬性來實(shí)現(xiàn)頁面排版。
示例代碼：

.container {
width: 960px;
margin: 0 auto;
}
.box {
width: 200px;
margin: 0 20px;
padding: 20px;
border: 1px solid #ccc;
}

3. 定位布局
定位布局是使用 CSS 的 position 屬性來定位元素的位置。通過設(shè)置 position 屬性的值為 relative 或 absolute，再結(jié)合 top、left、bottom、right 等屬性來實(shí)現(xiàn)頁面排版。
示例代碼：

.container {
width: 960px;
margin: 0 auto;
}
.box1 {
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
}
.box2 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 0;
}

4. Flexbox 布局
Flexbox 布局是 CSS 中比較新的一種布局方式，它能夠更好地解決元素的對齊、間距、尺寸等問題。通過設(shè)置容器的 display 屬性為 flex，再結(jié)合 flex-direction、justify-content、align-items 等屬性來實(shí)現(xiàn)頁面排版。
示例代碼：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 20px;
}

無論使用哪種布局方式，都需要合理地使用 CSS 屬性來控制元素的位置、尺寸、間距等參數(shù)，從而實(shí)現(xiàn)頁面的美觀和功能。