<length-percentage>

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<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 级 # 混合百分比

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题