CSS布局是網(wǎng)站設(shè)計(jì)中非常重要的一部分，它決定了網(wǎng)站的外觀和行為。在本文中，我們將討論四種常用的CSS布局。

1. 流動(dòng)布局

.container{
width: 100%;
}
.box{
width: 25%;
float: left;
}

流動(dòng)布局是一種基礎(chǔ)的布局方式，它允許元素沿著頁面流動(dòng)。在這個(gè)例子中，我們將一個(gè)包含四個(gè)盒子的容器設(shè)為100%寬度，然后將每個(gè)盒子的寬度設(shè)置為25%，并使用float屬性向左浮動(dòng)。

2. 定位布局

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

定位布局通過使用絕對和相對定位來控制元素的位置。在這個(gè)例子中，我們將容器設(shè)為相對定位，然后將盒子設(shè)為絕對定位并使用top，left和transform屬性將其放置在容器的中央。

3. 網(wǎng)格布局

.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.box{
background-color: #ccc;
}

網(wǎng)格布局通過將容器設(shè)為網(wǎng)格容器，然后在其中定義行和列，來實(shí)現(xiàn)元素的布局。在這個(gè)例子中，我們將容器設(shè)為網(wǎng)格容器，然后定義三列和兩行，并為盒子添加背景顏色。

4. 彈性盒子布局

.container{
display: flex;
justify-content: space-between;
}
.box{
width: 25%;
background-color: #ccc;
}

彈性盒子布局是一種現(xiàn)代的布局方式，它通過使用flex屬性來控制元素的布局。在這個(gè)例子中，我們將容器設(shè)為flex容器，并使用justify-content屬性將盒子均勻地分散在容器中。