作為前端開發人員，CSS 布局方式是你必須掌握的一項技能。它決定了網頁中元素的位置、大小和行為。這篇文章將介紹最常用的 CSS 布局方式，讓你快速上手。

1. 盒模型

在介紹布局方式之前，我們先來了解一下盒模型。盒模型指的是 HTML 元素所占據的空間。它由內到外分別是內容（content）、填充（padding）、邊框（border）和外邊距（margin）。每一個盒子都可以通過 CSS 來控制這些屬性。

.box{
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

2. 流式布局

流式布局指的是網頁根據瀏覽器窗口大小調整相應尺寸。這種布局方式可以通過相對單位來實現，比如百分比、em 和 rem。

.container{
width: 80%;
margin: 0 auto;
}
.box{
width: 50%;
float: left;
}

3. 彈性布局

彈性布局指的是網頁中的元素可以根據容器的大小調整自己的大小和位置。這種布局方式可以通過 flexbox 布局來實現。

.container{
display: flex;
justify-content: center;
align-items: center;
}
.box{
flex: 1;
padding: 10px;
}

4. 響應式布局

響應式布局指的是網頁可以在不同設備上按照不同的尺寸和布局進行適應。這種布局方式可以通過媒體查詢來實現。

.container{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.container{
width: 100%;
max-width: none;
padding: 10px;
}
}

以上就是最常用的 CSS 布局方式。不同的布局方式適用于不同的場景，應根據具體需求選擇適合的布局方式。