隨著網頁設計和開發的發展，CSS (層疊樣式表) 成為了構建現代網站的一個基礎技能。其中一個常見的布局問題是如何在網頁上創建內容塊。本文將探討一些常見的 CSS 技巧，可以用來布局內容塊。

/* 創建內容塊的基本結構 */
.block {
width: 100%;
max-width: 1200px; /* 可根據需要進行更改 */
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
/* 增加背景色和邊框 */
.block {
background-color: #f5f5f5;
border: 1px solid #ccc;
}
/* 使用彈性盒子（Flexbox）布局 */
.container {
display: flex;
justify-content: space-between; /* 水平排列，均勻分布 */
align-items: center; /* 垂直方向居中對齊 */
}
.container >div {
/* 一些設置 */
}
/* 使用浮動和清除浮動 */
.col {
float: left;
width: calc(33.33% - 20px); /* 減去 margin 占據的空間 */
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 使用網格布局 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等寬 */
grid-gap: 20px; /* 列間距 */
}
/* 媒體查詢，針對移動設備優化布局 */
@media (max-width: 767px) {
.col {
width: 100%;
margin-right: 0;
}
}

以上是一些 CSS 技巧，可以用來布局內容塊。可以根據需要選擇不同的方法，或者將它們組合在一起。當然，還有很多其他的 CSS 技巧可以用來布局內容塊，如流式布局和柵格系統等。重要的是要選擇最適合您需求的方法。