在網頁設計與開發中，CSS布局扮演著非常重要的角色。合理利用CSS布局可以使得網頁的排版更加美觀與合理，同時也會極大地提升用戶的體驗。接下來我們就來介紹一下CSS布局的一般知識和使用方法。

首先，要想理解CSS布局，就必須先了解盒模型。盒模型分為兩種：標準盒模型和IE盒模型。二者區別在于，標準盒模型的width和height屬性只會作用于內容區域，而IE盒模型的width和height屬性會作用于padding、border和內容區域的總和。

/* 標準盒模型 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
box-sizing: content-box; /* 顯示指定為標準盒模型 */
}
/* IE盒模型 */
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box; /* 顯示指定為IE盒模型 */
}

接下來，就可以用CSS進行網頁布局了。在CSS中，常用的布局方法主要有以下幾種：

1、流式布局

流式布局就是讓頁面在不同的屏幕大小下都保持一定比例。通常情況下是通過百分數設置元素的寬度。（注意：如果沒有設置最小寬度，那么在某些極端情況下會導致頁面元素擠壓變形）

/* 流式布局 */
.container {
width: 80%;
margin: 0 auto;
}
/* 固定寬度布局 */
.container {
width: 960px;
margin: 0 auto;
}

2、彈性布局

彈性布局是指通過設置flex屬性，讓容器中的元素彈性伸縮。相較于流式布局，彈性布局更加適用于復雜而且大小不定的元素。

/* 彈性布局 */
.container {
display: flex;
justify-content: center; /* 橫向居中 */
align-items: center; /* 縱向居中 */
}
/* 子元素 */
.item {
flex-grow: 1; /* 增加權重 */
flex-basis: 200px; /* 寬度基準 */
}

3、響應式布局

響應式布局是一種最流行的布局方法。通過媒體查詢，根據不同的屏幕大小調整界面的排版與元素的大小。通常情況下，我們會將PC、平板、手機等設備的屏幕大小作為參考，設置不同的布局方式與樣式。

/* 響應式布局 */
@media (max-width: 768px) {
.container {
width: 100%;
}
}

綜上所述，CSS布局在網頁設計與開發中扮演著重要的角色，我們需要根據網頁的需求與目標，選擇合適的布局方式與方法。相信通過不斷地學習和實踐，你會越來越熟練掌握CSS布局，并且能夠創造出更加出色的網頁設計。