<percentage>

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

许多长度属性使用百分比,如 width, height, margin, padding。百分比也可以在 font-size 看到,其中的文字大小是其父级元素的大小直接相关。

注意:只有计算值是可以继承的。所以,即使一个百分比值用于父属性,一个真正的值,比如具体像素宽度 <length> 的值,将访问继承的属性,而不是百分比的值。

语法

百分比值由一个<number>具体数值后跟着%符号构成。在数值前可加上+号或者-号,但对所有属性来说其负值都是无效的。和所有的CSS度量值一样,在%符号和数值之间不允许有空格。

插值动画

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

例子

作为 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> 

以上HTML将输出:

作为 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> 

以上HTML将输出:

规范

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<percentage>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes

Legend

Full support  
Full support