在此页

• 句法
• 插值
• 范例
• 规范
• 浏览器兼容性
• 相关话题

<percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding ，和 font-size .

注意： 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.

句法

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

插值

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 and margin-left

<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
					

The above HTML will output:

Font-size

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

The above HTML will output:

规范

规范	状态	注释
CSS Values and Units Module Level 4 The definition of '<percentage>' in that specification.	编者草案	No significant change.
CSS Values and Units Module Level 3 The definition of '<percentage>' in that specification.	候选推荐	No significant change from CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) The definition of '<percentage>' in that specification.	推荐	No change from CSS Level 1.
CSS Level 1 The definition of '<percentage>' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<percentage>	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 3	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

元数据

• 最后修改： Jun 25, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Types
4. 特性

   1. <angle-percentage>
   2. <angle>
   3. <basic-shape>
   4. <blend-mode>
   5. <custom-ident>
   6. <dimension>
   7. <frequency-percentage>
   8. <frequency>
   9. <gradient>
   10. <image>
   11. <integer>
   12. <length-percentage>
   13. <length>
   14. <number>
   15. <percentage>
   16. <ratio>
   17. <resolution>
   18. <shape>
   19. <string>
   20. <time-percentage>
   21. <time>
   22. <transform-function>
   23. <url>
   24. color
   25. flex
   26. ident
   27. position