Was sind CSS-Prozentwerte?
CSS-Prozentwerte sind relative Werte, deren Bezugsgröße für jede Eigenschaft separat definiert ist. Ein Prozentwert kann sich auf einen umschließenden Block, die Schriftgröße oder eine andere berechnete Abmessung beziehen.
So funktionieren CSS-Prozentwerte
Ein Prozentwert hat keine universelle Entsprechung in Pixeln. Die Grammatik der Eigenschaft bestimmt sowohl, ob er zulässig ist, als auch, welche Größe seine Bezugsbasis bildet. Die Auflösung kann bei der Berechnung des berechneten oder des verwendeten Werts erfolgen. Ist die umschließende Abmessung unbestimmt, können sich manche Prozentwerte ähnlich wie auto verhalten. Prozentwerte können auch in Funktionen wie calc() vorkommen und mit Längen kombiniert werden, sofern die Grammatik dies erlaubt. Sie sind zentral für fließende Layouts, Transformationen, Hintergründe, Typografie und Positionierung.
Wichtige Fakten
- Bei width bezieht sich ein Prozentwert normalerweise auf die Breite des umschließenden Blocks. Prozentwerte in translate() beziehen sich dagegen auf die eigene Referenzbox des transformierten Elements.
- Prozentuale Innenabstände oben und unten beziehen sich in gängigen horizontalen Schreibrichtungen auf die Inline-Abmessung des umschließenden Blocks. Das überrascht häufig bei Techniken zur Umsetzung von Seitenverhältnissen.
- Eine prozentuale Höhe benötigt in vielen Layoutkontexten eine auflösbare Höhe des umschließenden Blocks. Andernfalls kann sie sich wie auto verhalten. Daher füllt
height: 100%nicht automatisch den freien Platz.
Wann CSS-Prozentwerte relevant sind
Verwenden Sie Prozentwerte, wenn ein Element mit seiner maßgeblichen Bezugsgröße skalieren soll, statt eine feste Größe zu behalten. Prüfen Sie die Prozentbasis der Eigenschaft, denn derselbe Wert kann bei Breite, Höhe und Transformationen unterschiedlich aufgelöst werden.