CSS（層疊樣式表）是一種用于描述網頁結構、樣式和布局的語言。在此過程中，布局是一個最關鍵的方面。好的布局可以讓你的網站看起來更專業、更漂亮，并增加用戶的體驗。本文將介紹幾種常見的 CSS 布局模型，以及如何使用它們來構建好看的布局。

/* 一、流式布局 */
/* 將寬度設為百分比，以適應不同的屏幕尺寸 */
.container {
width: 80%;
margin: 0 auto;
}
/* 響應式的字體大小 */
@media (max-width: 600px) {
.container {
font-size: 16px;
}
}
/* 二、網格式布局 */
/* 將寬度設為固定值，使用網格來布局 */
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
}
.grid-item {
background-color: #fff;
padding: 20px;
}
/* 三、彈性盒模型 */
/* 使用 flexbox 進行布局 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
padding: 10px;
}
/* 四、定位布局 */
/* 使用相對或絕對定位來定位元素 */
.container {
position: relative;
}
.relative-item {
position: relative;
top: 50px;
left: 100px;
}
.absolute-item {
position: absolute;
top: 0;
left: 0;
}
/* 五、柵格布局 */
/* 使用柵格來快速布局 */
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.grid-item {
grid-column: span 4;
padding: 20px;
}
/* 六、多列布局 */
/* 使用多列布局來分割文章內容 */
.container {
column-count: 3;
}
/* 七、響應式布局 */
/* 使用媒體查詢實現響應式布局 */
@media (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}
}

不同的布局模型有其自己的優勢和用例。要選擇哪個布局模型可以根據你的特定需求和目標來確定。然而，無論你選擇哪個布局模型，都要確保你的布局優雅、易于使用，以及遵循最佳實踐。