files/zh-cn/web/css/number/index.html


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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

---
title: <number>
slug: Web/CSS/number
tags:
  - CSS数据类型
  - 布局
translation_of: Web/CSS/number
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">语法</h2>

<p><code>&lt;数字&gt;</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 数据类型代表一个数字，可为整数或小数。它的语法扩展了{{cssxref("&lt;integer&gt;")}}的数据值。要表示一个小数则加上小数部分 -- “."后跟一或多为十进制数字--到任何{{cssxref("&lt;integer&gt;")}}数据值。像{{cssxref("&lt;integer&gt;")}}数据类型一样，<span style="font-family: consolas,monaco,andale mono,monospace;">&lt;number&gt;没有任何单位，并不是一个CSS尺寸。</span></p>

<h2 id="Interpolation" name="Interpolation">插值</h2>

<p> <code>&lt;number&gt;</code> CSS数据类型的值可以被插值，用于动画。这种情况下，它们的插值是浮点实数。插值的速度取决于动画的 <a href="/en-US/docs/CSS/timing-function" title="timing-function">timing function</a>。</p>

<h2 id="Examples" name="Examples">示例</h2>

<p>合法值示例：</p>

<pre class="notranslate">12          A raw <a href="/en-US/docs/CSS/integer" title="integer">&lt;integer&gt;</a> is also a &lt;number&gt;
4.01        正非整 &lt;数字&gt;
-456.8      负非整 &lt;数字&gt;
0.0         零
+0.0        带正号的零
-0.0        带负号的零(尽管奇怪，但合法)
.60         点前的数字可以省略
<span style="line-height: normal;">10e3        科学计数法</span>
-3.4e-2     科学计数法最复杂的情况
</pre>

<p>非法值示例:</p>

<pre class="notranslate">12.         点后需有数字
+-12.2      只能有一个符号
12.1.1      只能有一个点
</pre>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td>与CSS Level 2 (Revision 1)没有明显变化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Explicitly defined</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Implicitly defined</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>basic</td>
   <td>1.0</td>
   <td>1.0 (1.0)</td>
   <td>&lt;=5.0</td>
   <td>yes</td>
   <td>1.0 (85)</td>
  </tr>
  <tr>
   <td>Scientific notation</td>
   <td>?</td>
   <td>29</td>
   <td>11</td>
   <td>?</td>
   <td>?</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">参见</h2>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
</ul>