百分比 | <percentage> (Values & Units)

  CSS 中文开发手册

百分比 | <percentage> (Values & Units) - CSS 中文开发手册

<percentage>CSS数据类型代表百分比值。许多CSS属性可以<percentage>取值，通常可以定义相对于其父元素的大小。众多CSS属性可以使用百分比类型，例如width，margin，padding，和font-size。

注意：只有计算值可以被继承。因此，即使在父属性上使用的是百分比值，但在继承的属性上访问到的却是实际值（如以像素为单位的<length>值），而不是百分比值。

语法

percentage由一个<number>和其后的百分号%组成。和所有的CSS单位一样，符号和数字之间没有空格。

线性插值

在animation中，百分比作为实浮点数被插入。插值速度由与动画相关的timing函数决定。

实例

宽度和左边距

<div style="background-color:blue;"> 
  <div style="50%;margin-left:20%;background-color:lime;">
    Width: 50%, Left margin: 20%
  </div> 
  <div style="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)

  CSS 中文开发手册

  本文标题：百分比 | <percentage> (Values & Units) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32139.html