html – CSS规范中有什么可以允许百分比属性相对于特定的元素/属性？

…这个定义由规范给出,然后符合规范的用户代理根据规范实现计算.该规范没有引用用户定义的百分比计算.如果我猜到这个猜测,那可能是因为它改变了一个内置的CSS单元是如何从根本上起作用的,可能会使开发人员面临许多复杂的问题.

在与您链接的相同规范中引入的07()函数本身不允许您指定CSS属性(或同一个元素或其他元素),这意味着您无法执行某些操作这个：

.text {
    height: 100px;
    line-height: calc(100% * height);
}

但是,有一个新发布的草稿CSS Custom Properties for Cascading Variables,允许作者指定自定义属性值,并将它们用于样式表中的任意规则集.而模块本身并没有讨论一种方式来让用户定义如何计算百分比,所以它讨论了使用calc()的级联变量.

这是非常有希望的：由于您已经能够使用calc()执行乘法和除法,所以您可以通过乘以十进制数而不是百分比来完全模拟百分比计算(或者仅使用100％的级联值) .您甚至可以强制通常不接受百分比的属性(如border-width)使用此方法根据某些其他属性计算其值.

这里有一个例子,interactive proof-of-concept在Firefox 31及更高版本中可用,当前的草案是在撰写本文时执行的：

.text {
    --h: 50px;
    height: var(--h);

    /* 100% of height,given by --h
       Line height percentages are normally based on font size */
    line-height: var(--h);

    /* 20% of height,given by --h
       Border properties do not normally accept percentages */
    border-width: calc(0.2 * var(--h));
    border-style: solid;
}

唯一的警告是,因为var()只适用于自定义属性,所以需要

>在自己的自定义属性中声明值,然后
>依赖于此值的任何属性都必须通过var()访问自定义属性.

但是,它的工作本身就非常有前途,我们只能希望这个新的模块将继续发展并得到更广泛的实施.