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 YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

文档标签和贡献者

最后编辑者: StudentMain,