在CSS中有許多特性可以用來優化頁面的樣式和布局。在這里，我們將介紹兩個比較重要的CSS特性：盒模型和偽類。

/* 盒模型特性 */
.box {
height: 100px;
width: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
/* 偽類特性 */
a:hover {
color: red;
}

盒模型

CSS盒模型指的是HTML元素的布局模式，一個盒子代表了一個頁面上的HTML元素，包括內容和區域，如padding、border和margin。CSS盒模型允許我們在盒子的內容和邊界之間添加空白，以及在盒子周圍添加邊框和外邊距。

上面的代碼示例演示了一個100x100像素的盒子，它有10像素的內邊距、1像素的邊框和20像素的外邊距。這個盒子的總大小為142x142像素。

偽類

CSS偽類是用于選擇特定狀態的HTML元素，比如當鼠標懸停在一個鏈接上時，我們可以使用:hover偽類來改變其樣式。偽類通常以冒號開頭，比如:hover、:active和:focus。

上面的代碼示例演示了一個鏈接的:hover狀態，當鼠標懸停在鏈接上時，鏈接將變為紅色。

這兩種CSS特性都可以幫助我們更好地布局和樣式化頁面，并在不同的狀態下選擇不同的樣式。它們在構建網頁和設計用戶體驗時非常有用。