<percentage>

概述

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.

Interpolation

插值

在<percentage> CSS数据类型的值可以插值变成动画。在这种情况下，它们被内插为实数，浮点数。插值的速度取决于与动画相关联的定时器。

Values of the <percentage> CSS data type can be interpolated in order to allow animations. In that case they are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.

例子

<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:

<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:

规范

浏览器兼容性