Was sind die Gemeinsamkeiten und Unterschiede zwischen relativen und absoluten Einheiten in CSS?

CSS (Cascading Style Sheets) ist eine Auszeichnungssprache, die zur Beschreibung der Stile von Elementen auf Webseiten verwendet wird. In CSS gibt es zwei verschiedene Längeneinheiten, nämlich relative Einheiten und absolute Einheiten.

Relative Einheiten werden relativ zur Größe des Elements selbst oder seines übergeordneten Elements berechnet. Gängige relative Einheiten sind: Prozentsatz (%), em und rem.

Prozenteinheiten werden relativ zur Größe des übergeordneten Elements berechnet. Wenn beispielsweise die Breite des übergeordneten Elements 400 Pixel beträgt und die Breite des untergeordneten Elements auf 50 % festgelegt ist, beträgt die tatsächliche Breite des untergeordneten Elements 200 Pixel (400 Pixel * 50 % = 200 Pixel).

em-Einheiten werden relativ zur Schriftgröße des Elements selbst berechnet. Wenn beispielsweise die Schriftgröße eines Elements auf 16 Pixel und die Breite eines darin enthaltenen untergeordneten Elements auf 2em festgelegt ist, beträgt die tatsächliche Breite des untergeordneten Elements 32 Pixel (16 Pixel * 2 = 32 Pixel).

rem-Einheiten werden auch relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements) berechnet. Dies bedeutet, dass rem-Einheiten unabhängig davon, wo im Dokument sie verwendet werden, denselben Wert ergeben. Wenn beispielsweise die Schriftgröße des Stammelements auf 16 Pixel und die Breite eines Elements auf 2rem festgelegt ist, beträgt die tatsächliche Breite des Elements 32 Pixel (16 Pixel * 2 = 32 Pixel).

Der Vorteil relativer Einheiten besteht darin, dass sie den Stil eines Elements basierend auf der Größe oder Schriftgröße des übergeordneten Elements dynamisch anpassen können, was ein responsives Design ermöglicht.

Absolute Einheiten sind feste Werte, die während des Designprozesses angegeben werden und sich nicht ändern, wenn sich das übergeordnete Element oder die Schriftgröße ändert. Gängige absolute Einheiten sind: Pixel (px), Punkte (pt) und Zoll (in).

Die Pixeleinheit ist die kleinste auf dem Bildschirm angezeigte Einheit und die am häufigsten verwendete absolute Einheit. Wenn beispielsweise die Breite eines Elements auf 200 Pixel eingestellt ist, beträgt die tatsächliche Breite des Elements 200 Pixel.

Die Punkteinheit ist eine in der Druckindustrie häufig verwendete Längeneinheit, und 1 Punkt entspricht 1/72 Zoll. In CSS entspricht 1pt 1,333 Pixel (ein Pixel entspricht ungefähr 0,75 Punkten). Wenn also die Breite eines Elements auf 150 Pixel eingestellt ist, beträgt die tatsächliche Breite des Elements 200 Pixel (150pt * 1,333 = 199,95 Pixel).

Die Zolleinheit ist eine international anerkannte Längeneinheit, 1 Zoll entspricht 25,4 Millimetern. Wenn die Breite eines Elements auf 2 Zoll eingestellt ist, beträgt die tatsächliche Breite des Elements 50,8 mm (2 Zoll * 25,4 = 50,8 mm).

Der Vorteil absoluter Einheiten im Vergleich zu relativen Einheiten besteht darin, dass sie eine präzise Steuerung ermöglichen und für Elemente geeignet sind, die feste Größen erfordern, wie z. B. Ränder, Hintergrundbilder usw.

Hier sind einige spezifische Codebeispiele, die zeigen, wie relative und absolute Einheiten verwendet werden:

/* 使用相对单位百分比 */
.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;
}

Anhand der obigen Codebeispiele können wir den Unterschied zwischen relativen und absoluten Einheiten deutlich erkennen. Durch die Verwendung relativer Einheiten können Sie den Stil eines Elements basierend auf Änderungen des übergeordneten Elements oder der Schriftgröße adaptiv anpassen, während Sie durch die Verwendung absoluter Einheiten eine feste Größe festlegen können.

Zusammenfassend lässt sich sagen, dass relative Einheiten für responsive Designs geeignet sind, während absolute Einheiten für Elemente geeignet sind, die feste Größen erfordern. In der tatsächlichen Entwicklung können wir je nach Bedarf geeignete Einheiten auswählen, um die besten Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonWas sind die Gemeinsamkeiten und Unterschiede zwischen relativen und absoluten Einheiten in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!