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

CSSの絶対単位と相対単位を理解する

CSS絶対単位

絶対長の単位は相互に固定されています。これらの単位は、出力形式がすでにわかっている場合に使用されます。以下は、絶対長の単位の一部です-

Sr.No 単位と説明
1 cm
センチメートル
2 mm
ミリメートル
3 in
インチ（1インチ=96px =2.54cm）
4 px *
ピクセル（1px =1inの1/96）
5 pt
ポイント（1pt =1inの1/72）
6 pc

picas（1pc =12 pt）

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 0.3in;
}
</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の絶対単位と相対単位を理解する

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の絶対単位と相対単位を理解する


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

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

  2. CSSのマージンとパディング

    マージンについては、CSSマージンプロパティを使用します。 marginプロパティは、HTML要素の周囲のスペースを定義します。 パディングの場合、パディングプロパティを使用すると、要素のコンテンツとその境界線の間に表示するスペースの量を指定できます。 以下は、CSSでマージンとパディングを表示するコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdan