1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: <percentage>
slug: Web/CSS/percentage
tags:
- CSS
- CSS 数据单位
- CSS 数据类型
translation_of: Web/CSS/percentage
---
<div>{{CSSRef}}</div>
<p><a href="/en/CSS" title="CSS">CSS</a> 数据类型 <code><percentage></code> 表述一个百分比值。许多 <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS 属性</a> 可以取百分比值，经常用以根据父对象来确定大小。百分比值由一个{{cssxref("<number>")}}具体数值后跟着%符号构成. 就像其它在css里的单位一样，在%和数值之间是不允许有空格的。</p>
<p>许多长度属性使用百分比，如 {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}。百分比也可以在 {{Cssxref("font-size")}} 看到，其中的文字大小是其父级元素的大小直接相关。</p>
<div class="note"><strong>注意：</strong>只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 {{cssxref("<length>")}} 的值，将访问继承的属性，而不是百分比的值。</div>
<h2 id="语法">语法</h2>
<p>百分比值由一个{{cssxref("<number>")}}具体数值后跟着<code>%</code>符号构成。在数值前可加上<code>+</code>号或者<code>-</code>号，但对所有属性来说其负值都是无效的。和所有的CSS度量值一样，在<code>%</code>符号和数值之间不允许有空格。</p>
<h2 id="插值动画">插值动画</h2>
<p>使用 <code><percentage></code> 的值可以插值为动画。在这种情况下，它们被内插为实数或浮点数。插值的速度取决于与动画相关联的 <a href="/zh-CN/docs/Web/CSS/single-transition-timing-function">timing function</a>。</p>
<h2 id="例子">例子</h2>
<h3 id="作为_width_与_margin-left_的值的单位">作为 width 与 margin-left 的值的单位</h3>
<pre class="brush: html"><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>
</pre>
<p>以上HTML将输出：</p>
<p>{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}</p>
<h3 id="作为_font-size_的值的单位">作为 font-size 的值的单位</h3>
<pre class="brush: html"><div style="font-size:18px;">
Full size text (18px)
<span style="font-size:50%;">50%</span>
<span style="font-size:200%;">200%</span>
</div>
</pre>
<p>以上HTML将输出：</p>
<p>{{EmbedLiveSample('Font-size', 'auto', 160)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>No significant change from CSS Level 2 (Revision 1).</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No change from CSS Level 1.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#percentage-units', '<percentage>')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.types.percentage")}}</p>
|
