CSS是前端开发中不可或缺的重要一环，其中宽高设置是最基本的属性之一。但有时候你会发现，设置了宽高，但元素的实际大小并没有改变，这时候我们就需要探寻宽高失效的根本原因。

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

在CSS开发中，我们通常使用像素(px)、百分比(%)、em等单位来定义宽高，然而这些单位的具体含义是有区别的。

像素(px)是最常用的单位，表示在屏幕上的一个点，每个点的大小是固定的，所以宽高也是固定的。百分比(%)则是相对于父元素的宽高进行计算的，所以父元素的宽高会影响子元素的实际宽高。em是相对于当前元素设定的字体大小，如果没有设定字体大小，则默认相对于浏览器的字体大小。

此外，还有一些元素是不支持宽高设置的，比如图片img标签、文本标签span等，这些元素的大小是根据内容自适应的，可以使用display属性将其转换为块状元素以支持宽高设置。

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

还有一些场景，比如绝对定位、浮动、弹性布局等，也会导致宽高失效。这是因为这些布局方式都会影响元素的盒模型，使得宽高的具体含义发生了改变，需要根据具体情况进行调整。

总之，宽高失效的原因很多，需要结合具体情况进行排查，合理使用单位和布局方式，才能达到预期的效果。