CSSにおける相対単位と絶対単位の違い

CSS の相対単位と絶対単位の違いは何ですか?具体的なコード例が必要です

CSS の単位は、相対単位と絶対単位に分けることができます。相対単位は要素自体またはその親要素のサイズを基準としたサイズを決定し、絶対単位は画面または印刷メディアのサイズを基準としたサイズを決定します。この記事では、CSS における相対単位と絶対単位の違いを詳しく紹介し、対応するコード例を示します。

1. 相対単位

1. em

em は、親要素のフォント サイズを基準にして決定される単位です。要素のフォント サイズを 1em に定義すると、親要素のフォント サイズと等しくなります。 em は連続して使用でき、各 em は前の em のサイズを基準にして計算されます。たとえば、親要素のフォント サイズが 16px で、子要素のフォント サイズが 1.5em として定義されている場合、子要素のフォント サイズは 24px (1.5 * 16px) になります。

サンプルコード:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem も相対単位ですが、ルート要素のフォント サイズに応じて決定されます ( html要素）。 rem の使用法は em と似ていますが、親要素のフォント サイズは継承せず、ルート要素のフォント サイズのみを継承します。これにより、複数のレベルをネストする場合のフォント サイズの累積計算が回避されます。

サンプルコード:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. 絶対単位

1. px

Pixel (ピクセル) は絶対単位です。画面 上記の最小単位。 px は、要素の幅、高さ、境界線、その他のサイズを定義するために CSS で使用されます。ブラウザのスケーリングの影響を受けず、ユーザーがブラウザ ウィンドウのサイズを変更してもピクセル サイズは変わりません。

サンプルコード:

element {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
}

2. cm

センチメートル (cm) は絶対単位であり、物理的なサイズに対する相対的な単位です。印刷メディアで cm 単位を使用すると、要素のサイズをより正確に制御できます。

サンプルコード:

element {
  width: 10cm;
  height: 5cm;
}

上記は、CSS における相対単位と絶対単位の違いと、それに対応するコード例です。比較と実践を通じて、これらの単位をよりよく理解して適用し、要素のサイズとレイアウトを柔軟に制御できるようになります。実際の開発では、ニーズに応じて適切なユニットを選択することで、Web ページやアプリケーションをさまざまなデバイスや画面サイズの表示効果にさらに適応させることができます。

以上がCSSにおける相対単位と絶対単位の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。