CSS是網頁設計不可或缺的技術之一。而百分比是網頁設計中極為常見的單位。它不僅可以用于設置寬度和高度，還可以用于設置字體大小、邊框寬度等。

/* 設置元素寬度為屏幕寬度的50% */
div {
width: 50%;
}
/* 設置字體大小為父元素的80% */
p {
font-size: 80%;
}
/* 設置元素內邊距為父元素寬度的10% */
ul {
padding: 10%;
}
/* 設置邊框寬度為元素寬度的5% */
img {
border: 5% solid black;
}

如上所示，我們可以通過設置百分比來實現相應的效果。需要注意的是，百分比的參照基準是其父元素的大小。因此，當我們需要將元素的大小設置為屏幕寬度或高度的百分比時，需要將其祖先元素的寬度和高度設置為100%。

/* 設置body元素寬度和高度為100% */
body {
width: 100%;
height: 100%;
}
/* 設置元素寬度為屏幕寬度的50% */
div {
width: 50%;
}

除此之外，我們還可以將百分比用于動畫過渡效果中。例如，我們可以將元素的寬度設置為0，并通過設置一個過渡效果，使其在顯示時逐漸變寬。如下所示：

/* 初始狀態下，將元素寬度設置為0 */
div {
width: 0;
}
/* 當元素顯示時，通過過渡效果將其寬度逐漸變為50% */
div.show {
width: 50%;
transition: width 1s;
}

除了上述應用之外，百分比在網頁設計中還有很多其他方面的應用，例如背景圖像的尺寸、內邊距和外邊距等。我們應該在實際應用中多加嘗試，逐步提高對CSS百分比的理解和運用能力。