首頁 >web前端 >css教學 >CSS 中的相對長度單位

CSS 中的相對長度單位

WBOY
WBOY轉載
2023-08-26 20:57:031287瀏覽

在CSS中,相對長度單位用於指定相對於另一個長度屬性的長度。

##1#em相對於元素的字體大小,即4em表示目前字體大小的4倍。 ex#相對於目前字體的x高度ch#相對於0的寬度rem相對於根元素的字體大小vw相對於視窗寬度的1%*vh相對於視口高度的1%*vmin相對於視口*較小的尺寸的1%#vmax相對於視口*較大的尺寸的1%%
序號 單位與描述

1

2

#3

4

5

6

7

8

9

相對於父元素

#範例

CSS 中的相对长度单位讓我們看一個使用相對長度單位的範例:

 示範

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

輸出

#範例

CSS 中的相对长度单位現在讓我們看另一個範例−

### 即時示範###
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
###輸出#############

以上是CSS 中的相對長度單位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除