百分比 | <percentage>
<percentage>CSS数据类型代表百分比值。许多CSS属性可以<percentage>取值，通常可以定义相对于其父元素的大小。众多CSS属性可以使用百分比类型，例如width，margin，padding，和font-size。
注意：只有计算值可以被继承。因此，即使在父属性上使用的是百分比值，但在继承的属性上访问到的却是实际值（如以像素为单位的<length>值），而不是百分比值。
语法
percentage由一个<number>和其后的百分号%组成。和所有的CSS单位一样，符号和数字之间没有空格。
线性插值
在animation中，百分比作为实浮点数被插入。插值速度由与动画相关的timing函数决定。
实例
宽度和左边距
<div style="background-color:blue;">
<div style="width:50%;margin-left:20%;background-color:lime;">
Width: 50%, Left margin: 20%
</div>
<div style="width:30%;margin-left:60%;background-color:pink;">
Width: 30%, Left margin: 60%
</div>
</div> 上面的HTML将输出：
字号
<div style="font-size:18px;">
<p>Full size text (18px)</p>
<p><span style="font-size:50%;">50%</span></p>
<p><span style="font-size:200%;">200%</span></p>
</div> 上面的HTML将输出：
规范
Specification | Status | Comment |
|---|---|---|
CSS Values and Units Module Level 3The definition of '<percentage>' in that specification. | Candidate Recommendation | No significant change from CSS Level 2 (Revision 1). |
CSS Level 2 (Revision 1)The definition of '<percentage>' in that specification. | Recommendation | No change from CSS Level 1. |
CSS Level 1The definition of '<percentage>' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
