<length-percentage>

<length-percentage> CSS 数据类型表示一个可以是 <length> 或 <percentage> 的值。

语法

有关此类型允许的各个语法的详细信息，请参阅 <length> 和 <percentage> 的文档。

正式语法

<length-percentage> = 
  <length>      |
  <percentage>

示例

length-percentage 示例

以下简单示例演示了几个使用 <length-percentage> 值的属性。

HTML

html

<p>You can use percentages and lengths in so many places.</p>

CSS

css

p {
  /* length-percentage examples */
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /* length examples */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* percentage example */
  text-size-adjust: 20%;
}

结果

在 calc() 中使用

如果将 <length-percentage> 指定为允许的类型，则表示百分比解析为长度，因此可以在 calc() 表达式中使用。因此，以下所有值对于 width 都是可以接受的

css

width: 200px;
width: 20%;
width: calc(100% - 200px);

规范

规范
CSS 值和单位模块级别 4 # 混合百分比

浏览器兼容性

BCD 表格仅在浏览器中加载