这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值,经常用以根据父对象来确定大小。Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number.

许多长度属性使用百分比,如{ { Cssxref(“width”)} },{ { Cssxref(“margin”)} }和{ { Cssxref(“填充”)} }。百分比也可以在{ {Cssxref(“font-size”)} }看到,其中的文字大小是其父级元素的大小直接相关。

Many length properties use percentages, such as width, margin and padding. Percentages can also be seen in font-size, where the size of the text is directly related to the size of its parent.

注意:只有计算值是可以继承的。所以,即使一个百分比值用于父属性,一个真正的值,比如具体像素宽度 <length> 的值,将访问继承的属性,而不是百分比的值。
Note: Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.

语法

The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

插值动画方面的应用

使用 <percentage> 的值可以插值为动画。在这种情况下,它们被内插为实数或浮点数。插值的速度取决于与动画相关联的 timing function

When animated, values of the <percentage> data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.

例子

作为 width 与 margin-left 的值的单位

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div> 

The above HTML will output:

作为 font-size 的值的单位

<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

The above HTML will output:

Specifications

Specification Status Comment
CSS Values and Units Module Level 3
<percentage>
Candidate Recommendation No significant change from CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)
<percentage>
Recommendation No change from CSS Level 1.
CSS Level 1
<percentage>
Recommendation Initial definition.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1 Yes Yes1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

文档标签和贡献者

此页面的贡献者: RainSlide, The-End-Hero, xhlsrj, mrstork, fscholz, FredWe
最后编辑者: RainSlide,