<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 2015年7月.
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 |
浏览器兼容性
Loading…