<percentage>

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

注意： 只有计算值可以继承。因此，即使在父属性上使用百分比值，继承的属性上也可以访问实际值（例如，<length> 值的像素宽度），而不是百分比值。

语法

<percentage> 数据类型由一个 <number> 后跟百分号 (%) 组成。可选地，它前面可以有一个 + 或 - 符号，尽管对于所有属性，负值都是无效的。与所有 CSS 尺寸一样，符号和数字之间没有空格。

插值

在动画化时，<percentage> 数据类型的值将作为真实的浮点数进行 插值。插值的速率由与动画关联的 缓动函数 确定。

示例

宽度和左外边距

html
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

上面的 HTML 将输出

字体大小

html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

上面的 HTML 将输出

规范

规范
CSS 值和单位模块 第 4 级
# 百分比

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅