<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 級 # 百分比 |
瀏覽器相容性
載入中…