CSS（層疊樣式表）是一種用于設計網頁的樣式語言。它為網頁提供了美觀的外觀和布局。本文將介紹 CSS 中用于布局的主要樣式。

/*設置容器*/
.container {
width: 100%;
max-width: 1200px; /*設置最大寬度*/
margin: 0 auto; /*水平居中*/
display: flex; /*利用彈性盒子布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
/*設置內容*/
.content {
flex: 1; /*占據剩余空間*/
padding: 20px;
}
/*設置側邊欄*/
.sidebar {
width: 200px;
background-color: #ddd;
}
/*設置柵格布局*/
.row {
display: flex;
flex-wrap: wrap; /*自動換行*/
}
.col-1 {
flex-basis: 8.33333%; /*占據 1/12 的空間*/
}
.col-2 {
flex-basis: 16.66667%; /*占據 2/12 的空間*/
}
.col-3 {
flex-basis: 25%; /*占據 3/12 的空間*/
}
.col-4 {
flex-basis: 33.33333%; /*占據 4/12 的空間*/
}

上述 CSS 樣式是常用的布局樣式。其中，.container 代表容器，使用了居中及彈性盒子布局，可以實現在不同分辨率下居中對齊。.content 是頁面主要內容區域，使用了彈性盒子布局，配合 .sidebar （側邊欄）可以實現雙欄布局。.row 和 .col-x （x 為數值）是柵格布局，用于實現頁面的基本排版效果。

除了上述常用布局樣式，CSS 還有很多其他樣式可供使用，如 flexbox 布局、網格布局、定位等等。不同的布局樣式可以針對不同的頁面需求進行選擇使用，以獲得最佳的頁面體驗。