Der Unterschied zwischen relativen und absoluten Einheiten in CSS

Was ist der Unterschied zwischen relativen Einheiten und absoluten Einheiten in CSS? Es werden spezielle Codebeispiele benötigt.

Einheiten in CSS können in relative Einheiten und absolute Einheiten unterteilt werden. Relative Einheiten bestimmen die Größe im Verhältnis zur Größe des Elements selbst oder seines übergeordneten Elements, während absolute Einheiten die Größe im Verhältnis zur Größe des Bildschirms oder Druckmediums bestimmen. In diesem Artikel wird der Unterschied zwischen relativen und absoluten Einheiten in CSS ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt.

1. Relative Einheit

1. em

em ist eine Einheit, die relativ zur Schriftgröße des übergeordneten Elements bestimmt wird. Wenn Sie die Schriftgröße eines Elements auf 1em festlegen, entspricht sie der Schriftgröße des übergeordneten Elements. Ems können nacheinander verwendet werden, wobei jedes Em relativ zur Größe des vorherigen Em berechnet wird. Wenn beispielsweise die Schriftgröße des übergeordneten Elements 16 Pixel beträgt und die Schriftgröße des untergeordneten Elements als 1,5 em definiert ist, beträgt die Schriftgröße des untergeordneten Elements 24 Pixel (1,5 * 16 Pixel).

Beispielcode:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem ist ebenfalls eine relative Einheit, wird jedoch relativ zur Schriftgröße des Stammelements (HTML-Element) bestimmt. Die Verwendung von rem ähnelt der von em, erbt jedoch nicht die Schriftgröße des übergeordneten Elements, sondern nur die Schriftgröße des Stammelements. Dadurch wird die kumulative Berechnung von Schriftgrößen bei der Verschachtelung mehrerer Ebenen vermieden.

Beispielcode:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. Absolute Einheit

1. px

Pixel (Pixel) ist eine absolute Einheit, es ist die kleinste Einheit, die auf dem Bildschirm angezeigt wird. px wird in CSS verwendet, um die Breite, Höhe, den Rand und andere Größen von Elementen zu definieren. Der Zoom des Browsers hat keinen Einfluss darauf und die Pixelgröße bleibt gleich, unabhängig davon, wie der Benutzer die Größe des Browserfensters ändert.

Beispielcode:

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

2. cm

Zentimeter (Zentimeter) ist eine absolute Einheit, die sich auf die physische Größe bezieht. Die Verwendung von cm-Einheiten in Druckmedien ermöglicht eine genauere Kontrolle über die Größe von Elementen.

Beispielcode:

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

Das Obige zeigt den Unterschied zwischen relativen und absoluten Einheiten in CSS und den entsprechenden Codebeispielen. Durch Vergleich und Übung können wir diese Einheiten besser verstehen und anwenden und die Größe und Anordnung der Elemente flexibel steuern. In der tatsächlichen Entwicklung kann die Auswahl der geeigneten Einheit je nach Bedarf dazu führen, dass sich die Webseite oder Anwendung besser an die Anzeigeeffekte verschiedener Geräte und Bildschirmgrößen anpasst.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen relativen und absoluten Einheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!