According to the current W3 CSS Spec：
Percentage values are always relative to another value,for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element,a property for an ancestor element,or a value of the formatting context (e.g.,the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property,the resultant value is the percentage times the initial value of that property.
我想定义一个元素的百分比应该是多少.我想参考：
>属性百分比的祖先元素是基于的.
>属性的百分比基于的指定元素的属性.
我有很多次有属性line-height(基于font-size)的百分比值和padding&保证金(which is based on width even for padding-top & padding-bottom/margin-top & margin-bottom).我明白,目前没有办法做我所说的话,但是我已经通过CSS规范搜索了与此有关的任何事情,而且我已经空手而归.
目前的规格(我无法找到)有什么可以允许我想做的吗？如果规格没有什么,那就是：
>关于这个概念的任何讨论/想法？
我正在想什么是不可能的某种原因？
在我看来,应该有可能作为属性与transition相同.
语法：< single-relative-property> || [无|这个|父] || <单关系-性>
例
.text {line-height：100％; relative：line-height height;}这个元素的行高是它自己的高度的100％.
.text {padding：5％0; relative：padding-top parent height,padding-bottom parent height;}这个元素的padding-top& padding-bottom都是父母身高的5％.
请注意,我知道有一些这些事情有工作.我也知道这一切可以用javascript完成.如果在任何地方曾经谈过/提到过,如果不是,为什么呢？因为这似乎可能是有用的东西.
我也明白,in a flexbox layout the padding & margin properties are based on their percentages respectfully是真棒.但这不是我正在寻找的.
解决方法
Each property that allows percentages also defines the value to which the percentage refers.
…这个定义由规范给出,然后符合规范的用户代理根据规范实现计算.该规范没有引用用户定义的百分比计算.如果我猜到这个猜测,那可能是因为它改变了一个内置的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()访问自定义属性.
但是,它的工作本身就非常有前途,我们只能希望这个新的模块将继续发展并得到更广泛的实施.
