Was sind die CSS-Margin-Einheiten?

CSS-Margeneinheiten umfassen px, %, em, rem, vw und vh, vmin und vmax, ex und ch, pt und pc usw. Detaillierte Einführung: 1. px, feste Längeneinheit; 2. %, die Randeinheit wird relativ zur Breite des übergeordneten Elements berechnet 3. em, die Randeinheit wird relativ zur Schriftgröße des Elements berechnet; . rem, Einheiten zur Berechnung der Ränder relativ zur Schriftgröße des Stammelements; 5. vw und vh, Einheiten relativ zur Ansichtsfensterbreite und -höhe usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, Dell G3-Computer.

CSS-Randeinheiten sind wie folgt:

Pixel (px): Pixel ist eine der am häufigsten verwendeten Randeinheiten. Es handelt sich um eine feste Längeneinheit, die einen Punkt auf dem Bildschirm darstellt. In CSS können Sie den Rand eines Elements mithilfe von Pixelwerten festlegen, zum Beispiel: margin: 10px.

Prozent (%): Prozent ist die Einheit, die zur Berechnung der Ränder relativ zur Breite des übergeordneten Elements verwendet wird. Wenn beispielsweise die Breite des übergeordneten Elements 200 Pixel beträgt und Sie den Rand auf 10 % festlegen, beträgt der Rand 20 Pixel. Prozenteinheiten können verwendet werden, um horizontale und vertikale Ränder festzulegen, zum Beispiel: margin-top: 10 %.

em: em ist die Einheit, die zur Berechnung der Ränder im Verhältnis zur Schriftgröße des Elements verwendet wird. Wenn die Schriftgröße eines Elements beispielsweise 16 Pixel beträgt und der Rand auf 2em eingestellt ist, beträgt der Rand 32 Pixel. Mit der Em-Einheit können auch horizontale und vertikale Ränder festgelegt werden, zum Beispiel: margin-left: 1,5em.

rem: rem ist die Einheit, die zur Berechnung der Ränder relativ zur Schriftgröße des Stammelements verwendet wird. Das Root-Element ist normalerweise ein HTML-Element. Im Gegensatz zur em-Einheit wird der Wert der rem-Einheit nicht von ihrem übergeordneten Element beeinflusst. Wenn beispielsweise die Schriftgröße des Stammelements 16 Pixel beträgt und der Rand auf 2rem eingestellt ist, beträgt der Rand 32 Pixel.

vw und vh: vw und vh sind Einheiten relativ zur Breite und Höhe des Ansichtsfensters. Der Viewport ist der sichtbare Bereich des Browserfensters oder Gerätebildschirms. vw stellt den Prozentsatz der Ansichtsfensterbreite dar und vh stellt den Prozentsatz der Ansichtsfensterhöhe dar. Wenn die Breite des Ansichtsfensters beispielsweise 1000 Pixel beträgt und die Ränder auf 10 vw eingestellt sind, betragen die Ränder 100 Pixel.

vmin und vmax: vmin und vmax sind Prozentsätze im Verhältnis zum kleineren oder größeren Wert von Ansichtsfensterbreite und Ansichtsfensterhöhe. vmin wird basierend auf der kleineren Größe im Ansichtsfenster berechnet und vmax wird basierend auf der größeren Größe im Ansichtsfenster berechnet. Wenn beispielsweise die Breite des Ansichtsfensters 1000 Pixel beträgt, die Höhe des Ansichtsfensters 800 Pixel beträgt und die Ränder auf 10 vmin eingestellt sind, betragen die Ränder 80 Pixel.

ex und ch: ex und ch sind die Einheiten, in denen Ränder relativ zur „x“-Höhe und „0“-Zeichenbreite der Schriftart berechnet werden. Diese Einheiten werden normalerweise zum Festlegen von Rändern verwendet, die einer bestimmten Schriftart zugeordnet sind. Wenn die „x“-Höhe der Schriftart beispielsweise 10 Pixel beträgt und die Ränder auf 2x eingestellt sind, betragen die Ränder 20 Pixel.

pt und pc: pt und pc sind Druckeinheiten, mit denen die Ränder beim Drucken festgelegt werden. pt bedeutet 1/72 Zoll, pc bedeutet 12 Punkte (1 Punkt entspricht 1/72 Zoll). Diese Einheiten werden in der Webentwicklung selten verwendet und sind häufiger in der Druck- und Verlagswelt zu finden.

Die oben genannten sind gängige Margin-Einheiten in CSS. Je nach spezifischen Bedürfnissen und Designanforderungen kann die Auswahl geeigneter Einheiten zum Festlegen der Ränder von Elementen das Seitenlayout flexibler und kontrollierbarer machen.

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Margin-Einheiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!