現在，CSS已成為設計web頁面的不二之選。由于其靈活性和可擴展性，CSS在網站布局方面變得越來越流行。為HTML頁面提供美觀和專業的外觀風格，并通過各種布局來提供良好的用戶體驗。接下來我們就來介紹幾個實際的CSS布局案例。

/* flexbox布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
flex: 1 1 300px;
margin: 10px;
}
/* 網格布局 */
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
}
.box {
grid-row: span 2;
grid-column: span 1;
}
/* 響應式布局 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.box {
flex: 1 1 100%;
}
}

上方的代碼展示了三種常用的CSS布局：flexbox布局、網格布局和響應式布局。使用CSS進行布局可以使頁面格式更加靈活和美觀，并且增加頁面的可用性。

在flexbox布局中，我們使用display:flex設置布局方式和排列方向，通過flex-wrap屬性控制是否換行，justify-content屬性可以設置靈活的元素對其方式。而在網格布局中，我們使用display:grid屬性來創建一個網格，使用grid-template-columns屬性定義列的數量和大小，grid-gap控制各網格間距離。對于響應式布局，我們使用@media指令和max-width屬性來根據屏幕尺寸調整元素的大小和位置。

使用CSS進行布局不僅能夠創建漂亮的樣式，同時還可以提高網站的可維護性和瀏覽器兼容性。這些布局技巧可以用于各種不同的網站，不論是商業網站還是個人博客都能夠從中受益。