We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS



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.

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



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

The above HTML will output:

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%


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

The above HTML will output:

Full size text (18px) 50% 200%


Specification Status Comment
CSS Values and Units Module Level 3
Candidate Recommendation No significant change from CSS Level 2 (Revision 1)
CSS Level 2 (Revision 1)
Recommendation No change from CSS Level 1
CSS Level 1


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support yes yes yes yes yes


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