在網頁設計中，CSS布局是非常重要的一環。正確的布局能夠增加網頁的美觀度和易讀性，提升用戶體驗。下面我們來了解一下常用的CSS布局結構。

/* 1. 流式布局 */
/* 這種布局是最常見的一種，容器的寬度隨屏幕大小自適應，元素的寬度使用百分比或 em 單位調整。
 * 能夠適應不同大小屏幕，但是會出現元素結構變形等問題，需要寫響應式樣式進行調整。 */
.container {
width: 100%;
}
.item {
width: 50%;
float: left;
}
/* 2. 定位布局 */
/* 使用絕對/相對定位和 margin/padding 調整元素的位置和大小，適用于小規模布局和定位，
 * 但是容易出現重疊遮擋等問題，不適用于復雜布局。 */
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 3. 網格布局 */
/* 利用網格容器對元素進行區域劃分和位置調整，可以快速的搭建網頁結構，但是需要瀏覽器支持，
 * 不兼容舊版本瀏覽器。 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
}
.item-1 {
grid-row: 1/3;
grid-column: 1/2;
}
/* 4. Flex布局 */
/* 讓容器內的元素在一個方向上排列，同時控制元素的寬度，高度和空間分配，并且非常靈活，
 * 可以快速搭建各種布局，適用于響應式開發。 */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 33.3%;
}