最近在開發網站時，遇到了一個令人困擾的問題——CSS百分比不起作用。明明按照百分比設置了寬度和高度，但是網頁上卻沒有任何變化。

經過一番探索和研究，我發現了這個問題的原因。

.container {
width: 50%;
height: 50%;
background-color: #ccc;
}

以上是一個常見的設置容器寬度和高度百分比的示例，但是其中缺少了一個關鍵的前提條件——父元素必須有固定的寬度和高度。

換句話說，你必須為父元素設置寬度和高度，否則子元素無法繼承百分比值。

.wrapper {
width: 500px;
height: 500px;
}
.container {
width: 50%;
height: 50%;
background-color: #ccc;
}

將以上示例中的.wrapper元素設置為固定寬度和高度，.container元素才能成功繼承50%的寬度和高度。

當然，這并不是CSS百分比不起作用的唯一原因。在一些特殊的情況下，如使用flex布局、浮動等屬性時，也會出現百分比失效的問題。

因此，在開發中需要認真分析和定位問題所在，同時要注意不同屬性對百分比的影響。

總之，在設置CSS百分比時，一定要注意父元素的寬度和高度，否則結果可能不盡如人意。