CSS参考手册
值和单位 | Values & Units
百分比 |
<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) |
值和单位 | Values & Units相关

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。