CSS-Größe in Prozent

Einheiten in CSS

Absolute Einheiten

in-Zoll; > cm; >

rem – verknüpft mit der Schriftgröße des Stammelements;

px – verknüpft mit CSS-Pixeln

% – der Prozentsatz eines anderen Attributwerts

Kann in CSS-Attributen verwendet werden, die Prozentsätze annehmen

Positionierung: oben, rechts, unten, links

Boxmodell: Breite, Höhe, Rand, Polsterung

Hintergrund: Hintergrundposition, Hintergrundgröße

Text: Texteinzug

Schriftart: Schriftgröße

Wie Prozentsätze berechnet werden

Prozentsatz Die Berechnung erfolgt relativ zu einer Basis relativ zum enthaltenden Block des aktuellen Elements.

Eigenschaften werden basierend auf der Breite des enthaltenden Blocks berechnet: Rand, Innenabstand, Breite, maximale Breite, minimale Breite, links, rechts, Texteinzug.

Basierend auf der Höhe von Berechnete Eigenschaften des enthaltenden Blocks: oben, unten, Höhe, maximale Höhe, minimale Höhe

Eigenschaften, die auf Grundlage der aktuellen Schriftgröße berechnet werden: Zeilenhöhe

Eigenschaften, die auf Grundlage der Zeilenhöhe berechnet werden : Vertical-Align

basiert auf der Breite und Höhe des Elements selbst: Hintergrundposition: Die Position des Hintergrundbilds, wobei zwei Werte in horizontaler Richtung bzw. vertikaler Richtung festgelegt werden. Wenn Prozent verwendet wird, wird der Prozentwert gleichzeitig auf das Element und die Bilder angewendet. Mit 50 % 50 % wird beispielsweise der (50 %, 50 %)-Punkt des Bildes am (50 %, 50 %)-Punkt des Rahmens ausgerichtet, was dem Festlegen des Mittelpunkts entspricht. Auf die gleiche Weise entspricht 0 % 0 % links oben, 100 % 100 % entspricht rechts unten

Basierend auf der Breite des Elements selbst: Hintergrundgröße, aber dieser Wert kann nur auf angewendet werden Blockelemente, der eingestellte Prozentwert. Die Größe des Hintergrundbilds wird basierend auf dem Prozentsatz der Breite des Elements berechnet, in dem es sich befindet

Empfohlenes Tutorial: „

CSS-Tutorial

“

Das obige ist der detaillierte Inhalt vonCSS-Größe in Prozent. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!