<percentage>
<percentage> CSS 数据类型表示百分比值。它通常用于将尺寸定义为相对于元素的父对象。许多属性都可以使用百分比，例如 width、height、margin、padding 和 font-size。
注意：只有计算值可以被继承。因此，即使在父属性上使用了百分比值，继承属性上也可以访问实际值（例如 <length> 值的像素宽度），而不是百分比值。
语法
<percentage> 数据类型由一个 <number> 后跟百分号 (%) 组成。可选地，它可以前面带一个 + 或 - 号，尽管负值并非对所有属性都有效。与所有 CSS 尺寸一样，符号和数字之间没有空格。
插值
示例
宽度和左外边距
html
<div class="container">
<div class="box1">Width: 50%, Left margin: 20%</div>
<div class="box2">Width: 30%, Left margin: 60%</div>
</div>
css
.container {
background-color: navy;
}
.box1 {
width: 50%;
margin-left: 20%;
background-color: chartreuse;
}
.box2 {
width: 30%;
margin-left: 60%;
background-color: pink;
}
字体大小
html
<div class="container">
<p>Full-size text (18px)</p>
<p><span class="half">50% (9px)</span></p>
<p><span class="double">200% (36px)</span></p>
</div>
css
.container {
font-size: 18px;
}
.half {
font-size: 50%;
}
.double {
font-size: 200%;
}
规范
| 规范 |
|---|
| CSS 值和单位模块第 4 级 # 百分比 |
浏览器兼容性
加载中…