CSS是前端開發中不可或缺的重要一環，其中寬高設置是最基本的屬性之一。但有時候你會發現，設置了寬高，但元素的實際大小并沒有改變，這時候我們就需要探尋寬高失效的根本原因。

.box {
width: 200px;
height: 100px;
}

在CSS開發中，我們通常使用像素(px)、百分比(%)、em等單位來定義寬高，然而這些單位的具體含義是有區別的。

像素(px)是最常用的單位，表示在屏幕上的一個點，每個點的大小是固定的，所以寬高也是固定的。百分比(%)則是相對于父元素的寬高進行計算的，所以父元素的寬高會影響子元素的實際寬高。em是相對于當前元素設定的字體大小，如果沒有設定字體大小，則默認相對于瀏覽器的字體大小。

此外，還有一些元素是不支持寬高設置的，比如圖片img標簽、文本標簽span等，這些元素的大小是根據內容自適應的，可以使用display屬性將其轉換為塊狀元素以支持寬高設置。

img {
display: block;
width: 200px;
height: 100px;
}

還有一些場景，比如絕對定位、浮動、彈性布局等，也會導致寬高失效。這是因為這些布局方式都會影響元素的盒模型，使得寬高的具體含義發生了改變，需要根據具體情況進行調整。

總之，寬高失效的原因很多，需要結合具體情況進行排查，合理使用單位和布局方式，才能達到預期的效果。