CSS是網(wǎng)頁設(shè)計中使用最廣泛的工具之一，可以實現(xiàn)各種布局效果。接下來將介紹CSS常見的布局方式。

/* 1. 流式布局 */
div {
width: 100%;
}
/* 2. 定位布局 */
#box {
position: absolute;
left: 20px;
top: 50px;
}
/* 3. 彈性盒子布局 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* 4. 網(wǎng)格布局 */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
/* 5. 多列布局 */
.column-container {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
column-gap: 20px;
}
/* 6. 響應(yīng)式布局 */
@media screen and (max-width: 768px) {
/* 在屏幕寬度小于768px的情況下 */
div {
width: 50%;
}
}

以上是CSS中六種常見的布局方式，每種布局適用于不同的場景和要求。在實際開發(fā)中，需要根據(jù)頁面的要求和設(shè)備的特性來選擇最適合的布局方式。