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

CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值,经常用以根据父对象来确定大小。百分比值由一个<number>具体数值后跟着%符号构成. 就像其它在css里的单位一样,在%和数值之间是不允许有空格的。

许多长度属性使用百分比,如{ { 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.

语法

 

百分比值由一个<number>具体数值后跟着%符号构成. 这是可选择的,在数值前加上+号或者-号,虽然负值对所有属性是无效的。和所有的css规则一样,在%符号和数值之间是不允许有空格的。

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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

文档标签和贡献者

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