CSS の相対単位と絶対単位の類似点と相違点は何ですか?

CSS (Cascading Style Sheets) は、Web ページ上の要素のスタイルを記述するために使用されるマークアップ言語です。 CSS には、相対単位と絶対単位という 2 つの異なる長さ単位があります。

相対単位は、要素自体またはその親要素のサイズを基準にして計算されます。一般的な相対単位は、パーセント (%)、em および rem です。

パーセント単位は、親要素のサイズを基準にして計算されます。たとえば、親要素の幅が 400px で、子要素の幅が 50% に設定されている場合、子要素の実際の幅は 200px (400px * 50% = 200px) になります。

em 単位は、要素自体のフォント サイズに応じて計算されます。たとえば、要素のフォント サイズが 16px に設定され、その中の子要素の幅が 2em に設定されている場合、子要素の実際の幅は 32px (16px * 2 = 32px) になります。

rem 単位は、ルート要素 (つまり、html 要素) のフォント サイズに応じて計算されます。これは、ドキュメント内のどこで rem 単位が使用されていても、同じ値に評価されることを意味します。たとえば、ルート要素のフォント サイズが 16px に設定され、要素の幅が 2rem に設定されている場合、要素の実際の幅は 32px (16px * 2 = 32px) になります。

相対単位の利点は、親要素のサイズまたはフォント サイズに基づいて要素のスタイルを動的に調整できるため、レスポンシブなデザインが可能になることです。

絶対単位は設計プロセス中に指定される固定値であり、親要素やフォント サイズが変更されても変わりません。一般的な絶対単位は、ピクセル (px)、ポイント (pt)、およびインチ (in) です。

ピクセル単位は画面に表示される最小単位であり、最も一般的に使用される絶対単位です。たとえば、要素の幅が 200 ピクセルに設定されている場合、要素の実際の幅は 200 ピクセルです。

ドット単位は印刷業界で一般的に使用される長さの単位で、1 ドットは 1/72 インチに相当します。 CSS では、1pt は 1.333px (1 ピクセルは約 0.75 ポイントに等しい) に等しいため、要素の幅が 150pt に設定されている場合、要素の実際の幅は 200px (150pt * 1.333 = 199.95px) になります。

インチ単位は国際的に認められている長さの単位で、1 インチは 25.4 ミリメートルに相当します。要素の幅が 2 インチに設定されている場合、要素の実際の幅は 50.8mm (2 インチ * 25.4 = 50.8mm) になります。

相対単位と比較した絶対単位の利点は、正確な制御が可能であり、境界線や背景画像などの固定サイズを必要とする要素に適していることです。

次に、相対単位と絶対単位の使用を示す具体的なコード例をいくつか示します:

/* 使用相对单位百分比 */
.container {
  width: 80%;
  margin: 0 auto;
}

/* 使用相对单位em */
h1 {
  font-size: 2em;
}

/* 使用相对单位rem */
p {
  font-size: 1.5rem;
}

/* 使用绝对单位像素 */
.img {
  width: 300px;
  height: 200px;
}

/* 使用绝对单位点 */
.text {
  font-size: 12pt;
}

/* 使用绝对单位英寸 */
.box {
  width: 2in;
  height: 1in;
}

上記のコード例を通じて、相対単位と絶対単位の違いが明確にわかります。違い。相対単位を使用すると、親要素またはフォント サイズの変更に基づいて要素のスタイルを適応的に調整できます。一方、絶対単位を使用すると、サイズを固定できます。

要約すると、相対単位はレスポンシブ デザインに適しており、絶対単位は固定サイズを必要とする要素に適しています。実際の開発では、さまざまなニーズに応じて適切なユニットを選択して、最良の結果を達成できます。

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