ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS の相対長単位

CSS の相対長単位

WBOY転載: 2023-08-26 20:57:031319ブラウズ

CSS では、相対長単位は、別の長さ属性に対する相対的な長さを指定するために使用されます。

#シリアル番号ユニットと説明1#2ex3ch##4#rem#ルート要素に対する相対的なフォントサイズvwビューポート幅に対して 1%*vh#vminビューポートに対して小さいサイズの 1%*vmax親要素を基準としたデモンストレーション

<!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>


	em要素のフォントサイズを基準にします。つまり、4em は現在のフォントサイズの 4 倍を意味します。
	現在のフォントに対する x-高さ
	0 を基準とした幅
	5
	6
	ビューポートの高さに対して 1%* 7
	##8
ビューポートに比べて大きいサイズの 1%*	##9 %
	例相対長さ単位の使用例を見てみましょう:

出力

例

次に、別の例を見てみましょう -

リアルタイムデモンストレーション 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 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：CSSを使用してボックスの幅を設定します次の記事：CSSを使用してボックスの幅を設定します

続きを見る