css不支持百分比单位

在 CSS 中，有很多不同的单位可以用来定义元素的大小或位置。其中最常用的单位之一是百分比（%），它可以让我们根据父元素的大小来定义子元素的大小或位置，非常方便。但是，事实上，并不是所有的 CSS 属性都支持百分比单位。

一般来说，只有那些与尺寸有关的属性才支持百分比单位。比如 width、height、font-size、padding、margin 等。而像颜色、背景图片等属性就不支持百分比单位。

为什么会有这种区别呢？其实这与属性的本质有关。尺寸相关的属性需要知道父元素的大小才能确定自己的大小或位置，所以使用百分比单位可以很方便地实现这个目的。而颜色和背景图片这些属性则不需要知道父元素的大小，它们只需要一个确定的值就可以了。

/* 这里的百分比单位是合法的，因为 width 属性需要知道父元素的大小 */
#myDiv {
    width: 50%;
}

/* 这里的百分比单位是不合法的，因为 color 属性不需要知道父元素的大小 */
#myDiv {
    color: 50%;
} 

当我们在不支持百分比单位的属性上使用了这种单位时，浏览器会将其视为无效的，这是很重要的，因为如果浏览器将这种单位解析成具体的数值，很可能会导致不可预测的结果，从而破坏页面的布局和样式。