CSS布局是網頁設計和開發中重要的一部分，可以實現各種各樣的布局效果。下面詳細講解一些常見的CSS布局技術。 1. 盒子模型布局 盒子模型布局是最基礎、也是最常見的布局方式。它是指在HTML中通過定義盒子樣式來實現網頁布局。 pre代碼示例： ``` .box { width: 200px; height: 100px; background-color: #ccc; } ``` 通過設置盒子的高度、寬度和背景顏色，我們就可以實現簡單的盒子模型布局。 2. 浮動布局 浮動布局是指將元素從正常的文檔流中移除，并通過設置浮動屬性，使它們漂浮在其父元素的左側或右側。 pre代碼示例： ``` .left { float: left; width: 50%; } .right { float: right; width: 50%; } ``` 通過設置左右兩個元素的浮動屬性，我們可以實現左右分欄的浮動布局。 3. 彈性盒子布局 彈性盒子布局是指通過設置 display: flex 屬性來實現彈性布局。它是一個非常靈活的布局方式，可以實現水平和垂直方向上的對齊與分布。 pre代碼示例： ``` .container { display: flex; justify-content: center; align-items: center; } ``` 通過設置容器的 display: flex 屬性并設置子元素的對齊方式，我們可以實現垂直和水平方向上的彈性盒子布局。 4. 網格布局 網格布局是CSS3新增的一種布局方式，可以實現復雜的網格布局效果。 pre代碼示例： ``` .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; } ``` 通過設置容器的 display: grid 屬性和子元素的行列數量，我們可以實現網格布局，同時可以通過設置 gap 來調整網格間的間距。 以上是一些常見的CSS布局技術，它們可以單獨或組合使用來實現各種各樣的布局效果。