首頁 > 文章 > web前端 > CSS 中的相對長度單位

CSS 中的相對長度單位

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

在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刪除

上一篇：使用 CSS 設定框的寬度下一篇：使用 CSS 設定框的寬度

看更多