CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの相対的な長さの単位

CSSの相対的な長さの単位は、別の長さプロパティを基準にした長さを指定するために使用されます。

Sr.No 単位と説明
1 em
要素のフォントサイズを基準にしています。つまり、4emは、現在のフォントの4倍のサイズを意味します。
2 例
現在のフォントのエックスハイトを基準にしています
3 ch
0の幅を基準に
4 rem
ルート要素のフォントサイズを基準
5 vw
ビューポートの幅の1％に対して*
6 vh
ビューポートの高さの1％に対して*
7 vmin
ビューポートの*小さい方の寸法の1％に対して
8 vmax
ビューポートの*大きい方の寸法の1％に対して
9 ％
親要素を基準に

例

相対長さの単位を使用した例を見てみましょう-

<!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の相対的な長さの単位


  1. CSSで機能する相対ポジショニング

    CSSでの要素の配置は、要素を通常どおりにレンダリングする相対的なものとして定義できます。相対的な配置方法を持つ要素は、CSSの配置プロパティ（左、右、上、下）によって配置されます。 例 CSS相対測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0; } div:first-child {    position: relative;    top:20px;    backg

  2. CSSの絶対単位と相対単位

    CSS絶対単位と相対単位はどちらも、距離単位のカテゴリに分類されます。 CSS相対単位は、別の要素を参照する要素の長さを定義します。 たとえば、 vh 相対単位はビューポートの高さを基準にしています。 以下はCSSの相対単位です- Sr.No 単位と相対値 1 ％ 親要素の寸法 2 em 要素のフォントサイズ 3 例 要素のフォントのエックスハイト 4 lh 要素の線の高さ 5 rem ルート要素のフォントサイズ 6 rlh ルート要素の線の高さ 7