百分比 | (Values & Units) - CSS 中文开发手册 - Break易站

2022-09-27 12:59:02

??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="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.