css 宽高百分比不起作用

在CSS中，我们常常会使用宽高百分比来设置元素的大小，但有时候我们会发现宽高百分比并不起作用。那么问题出在哪里呢？

.demo{
  width: 50%;
  height: 50%;
}

首先，我们需要明确一点，CSS中的百分比是相对于父元素的大小来计算的。如果父元素的宽高没有显式声明，那么子元素的百分比大小就无从谈起了。

.parent{
  /*width和height未设置*/
}

.child{
  width: 50%;
  height: 50%;
}

上面的代码中，父元素的宽高并没有设置，子元素的百分比大小就无法计算。此时我们可以为父元素设置一个固定宽高，或者使用js等方法获取父元素的实际宽高来进行计算。

.parent{
  width: 500px;
  height: 500px;
}

.child{
  width: 50%;
  height: 50%;
}

当我们为父元素设置了固定宽高后，子元素的百分比大小就可以正常计算了。同时，我们也需要注意一下盒模型的情况，以免出现计算错误。

总结来说，CSS中的宽高百分比不起作用，大多是由于父元素的宽高未设置所导致的。如果遇到这个问题，我们可以检查一下父元素的宽高设置，或者使用js等方法获取实际宽高进行计算。