<length-percentage>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

语法

参考 <length> 和 <percentage> 的文档以具体了解该类型允许使用的语法。

形式语法

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

示例

length-percentage 示例

以下简单示例描述了使用 <length-percentage> 值的一些属性。

HTML

html

<p>你可以在很多地方使用百分比（percentage）和长度（length）值。</p>

CSS

css

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

  /* 长度值示例 */
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /* 百分比值示例 */
  text-size-adjust: 20%;
}

结果

在 calc() 中使用

当 <length-percentage> 被指定为允许类型时，这意味着百分比解析为长度，因此可以在 calc() 表达式中使用。因此，width 可以接受以下所有值：

css

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

规范

Specification
CSS Values and Units Module Level 4 # mixed-percentages