Der Unterschied zwischen PX, EM, % in CSS erklärte

Das CSS bietet eine Vielzahl von Funktionen bei der Änderung der Größe des Elements. Die häufigsten unter diesen Einheiten sind PX, EM und %(Prozentsatz). Für einen Anfänger wäre es schwierig, den Unterschied zwischen diesen zu verstehen, sodass sie die PX -Einheit am meisten üben. Der EM -Ein %(Prozentsatz) dient jedoch dem reaktionsschnellen Verhalten von Elementen. In Anbetracht der Bedeutung all dieser dieser Artikel zeigt dieser Artikel einen Leitfaden, der den Unterschied zwischen PX, EM und %(Prozentsatz) bietet.

Dieser Beitrag zeigt den Unterschied zwischen PX, EM und %(Prozentsatz). Darüber hinaus würden Sie auch über maklerweite und absolute Einheitslängen und deren Unterschiede erfahren.

Was ist der Unterschied zwischen PX, EM und Prozent (%) in CSS?

In CSS werden die Größeneinheiten in zwei Kategorien eingeteilt, das Absolute und die relative Maßnahme.

Absolute Einheiten

Die absoluten Einheiten haben feste Werte und ändern daher seine Werte nicht, wenn der Benutzer sie manuell ändert. Der px Die Einheit fällt unter die absolute Kategorie der Größeneinheiten in CSS. Obwohl PX nicht gut für die Reaktionsfähigkeit ist, wird immer noch geübt, wo die Elemente feste Größen auf dem Bildschirm erfordern. Darüber hinaus nutzt der neue Benutzer die tendenziell die px als Größeneinheit, da es leicht zu handhaben ist und nicht von einer anderen Größeneinheit oder einem anderen Element abhängt.

Relative Einheiten

Die anderen zwei em Und Prozentsatz gehört zur relativen Kategorie von Elementen, da beide ihr Verhalten ändern, um die Reaktionsfähigkeit zu verwalten.

EM: Diese Einheit bezieht sich auf die Schriftgröße des Eltern-/Stammelements. Es kann auch zur Breite/Höhenanpassung verwendet werden, aber der Wert von 1EM wäre 16px.

Prozentsatz(%): Die prozentuale Einheit zeigt die Relevanz mit dem übergeordneten Element.

Zum Beispiel, wenn ein übergeordnetes Element das definiert Breite = "10px“. Nun würde dieser Wert als Verweis angenommen, um die Breite in der Breite zu verbinden Prozentsatz.

Notiz: CSS bietet verschiedene andere relativ.

Beispiel: Verwenden von PX-, EM- und Prozentwerten

Der folgende HTML -Code wird praktiziert, um den Unterschied zwischen PX-, EM- und Prozentwerten zu erreichen.

Html

Breite in %

Schriftgröße in em

Im obigen Code gibt es zwei Elternelemente (Div-Tags) und jeder Elternteil hat ein Kind. Die erste Eltern Div enthält einen Absatz, der die Breite im Prozentsatz ausüben würde, und die zweite Eltern DIV berücksichtigt die Schriftgröße des Elements.

CSS

Das obige CSS wäre der Hauptakteär, um den Unterschied zwischen PX, EM und Prozentsatz zu demonstrieren. Die Breite der Div -Tags ist auf 250px eingestellt, was bedeutet, dass sie 100% entspricht. Zum Beispiel im obigen Code die .pro Klasse dauert 75% der Gesamtbreite (250px).

In ähnlicher Weise ist die Schriftgröße der zweiten Divelelemente auf 12px eingestellt, was bedeutet, dass 1EM gleich 12px entspricht. Wenn der Wert von EM geändert wird, würde er sich relativ zum 12px ändern (zum übergeordneten Element).

Ausgang

Aus der Ausgabe wird beobachtet, dass die Breite des untergeordneten Elements (Absatz) auf 75% seines übergeordneten Elements (Div) angepasst wurde. Darüber hinaus ist die Schriftgröße auf 2EM eingestellt, was bedeutet, dass sie im Vergleich zur Schriftgröße ihres übergeordneten Elements (12px = 1EM) doppelt so groß ist.

Abschluss

Der px gehört zur absoluten Kategorie der Längeneinheiten, während sich das EM und der %(Prozentsatz) auf die relative Klasse von Größeneinheiten beziehen. Der Wert von px wird über das HTML -Dokument behoben, aber das em Und %(Prozentsatz) hängt von der Einheit ab, die vom übergeordneten Element verwendet wird. Die EM manipuliert die Schriftgröße der HTML -Elemente und die (%) prozentuale Einheit hauptsächlich auf die Änderung der Höhe/Breite eines HTML -Elements (gemäß dem übergeordneten Element). In diesem Artikel hätten Sie die Grundlagen verschiedener Einheiten wie PX, EM und Prozentsatz gelernt. Für ein besseres Verständnis haben wir ein Beispiel gezeigt, das den Unterschied zwischen all diesen Einheiten besser verdeutlicht.