在網頁設計中，我們通常需要展示多個不同的區塊。而這些區塊的外觀是需要通過 CSS 來進行樣式設置的。怎么使用 CSS 來設置區塊呢？接下來，我們將輕松學習。

.block {
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 10px;
}

以上的代碼使用了 CSS 的 class 選擇器，把具有 block 類名的元素的樣式設置了如下效果：

• 背景顏色為亮灰色
• 邊框為細灰線
• 內邊距為 10 像素

除此之外，我們還可以通過設置寬度、高度、邊距、排列方式、文本大小等多種方式來調整區塊的樣式。以下是一些實用的示例代碼：

.red-box {
background-color: red;
width: 200px;
height: 150px;
}
.green-box {
background-color: green;
margin: 10px;
padding: 20px;
display: inline-block;
}
.blue-box {
background-color: blue;
font-size: 18px;
text-align: center;
}

以上代碼分別實現了：

• 一個紅色的盒子，寬為 200 像素，高為 150 像素
• 一個綠色的盒子，外邊距為 10 像素，內邊距為 20 像素，使用行內塊元素排列
• 一個藍色的盒子，字體大小為 18 像素，文本居中

這些設置不僅可以運用到區塊上，還可以運用到其他元素上，例如按鈕、導航菜單等等。只需要靈活地運用 CSS 樣式，就能輕松創建出美觀的網頁。