Logische Eigenschaften für Floats und Positionierung

Die folgende Tabelle führt die logischen Eigenschaften und Werte auf, die in diesem Leitfaden besprochen werden, zusammen mit ihren Zuordnungen zu physischen Eigenschaften und Werten. Sie nehmen einen horizontalen writing-mode mit einer Links-nach-Rechts-Richtung an.

Logische Eigenschaft oder Wert	Physische Eigenschaft oder Wert
float: inline-start	float: left
float: inline-end	float: right
clear: inline-start	clear: left
clear: inline-end	clear: right
inset-inline-start	left
inset-inline-end	right
inset-block-start	top
inset-block-end	bottom
text-align: start	text-align: left
text-align: end	text-align: right

Zusätzlich zu diesen zugeordneten Eigenschaften gibt es einige zusätzliche Kurznotationseigenschaften, die durch die Möglichkeit, Block- und Inline-Dimensionen anzusprechen, ermöglicht werden. Diese haben keine Zuordnung zu physischen Eigenschaften, abgesehen von der inset-Eigenschaft.

Logische Eigenschaft	Zweck
inset-inline	Setzt beide oben genannten Einfügewerte für die Inline-Dimension gleichzeitig.
inset-block	Setzt beide oben genannten Einfügewerte für die Block-Dimension gleichzeitig.
inset	Setzt alle vier Einfügewerte gleichzeitig mit physischer Zuordnung von Mehrwerten.

Die physischen Werte, die mit den Eigenschaften float und clear verwendet werden, sind left, right und both. Das CSS-Modul für logische Eigenschaften und Werte definiert die Werte inline-start und inline-end als Zuordnungen für left und right.

Dieses Beispiel hat zwei Boxen — die erste Box ist mit float: left gefloatet, die zweite mit float: inline-start. Wenn Sie den writing-mode auf vertical-rl oder die direction auf rtl ändern, sehen Sie, dass die links gefloatete Box immer links bleibt, während sich das inline-start-gefloatete Element der direction und dem writing-mode anpasst.

Die CSS-Positionierung ermöglicht es im Allgemeinen, ein Element in einer Weise relativ zu seinem umgebenden Block zu positionieren — wir setzen das Element im Wesentlichen relativ zu dem Punkt, an dem es im normalen Fluss fallen würde, ein. Um ein Element relativ zum Ansichtsfenster zu positionieren, verwenden Sie die physischen Eigenschaften top, right, bottom und left. Wenn Sie möchten, dass die Positionierung sich auf den Textfluss im Schreibmodus bezieht, verwenden Sie stattdessen inset-block-start, inset-block-end, inset-inline-start und inset-inline-end.

Diese Eigenschaften nehmen eine Länge oder einen Prozentsatz als Wert und beziehen sich auf die Bildschirmabmessungen des Benutzers.

Im untenstehenden Beispiel werden die Eigenschaften inset-block-start und inset-inline-end verwendet, um die blaue Box mit absoluter Positionierung innerhalb des Bereichs mit der grauen gestrichelten Umrandung zu positionieren, der position: relative hat. Ändern Sie die writing-mode-Eigenschaft auf vertical-rl, oder fügen Sie direction: rtl hinzu, und sehen Sie, wie sich die relativ zum Textfluss positionierte Box verhält.

Wie bei anderen Eigenschaften im Modul haben wir Kurznotationseigenschaften, die die Möglichkeit geben, zwei oder vier Werte gleichzeitig festzulegen.

• inset — setzt alle vier Seiten zusammen mit physischer Zuordnung.
• inset-inline — setzt beide logischen Inline-Einfügungen.
• inset-block — setzt beide logischen Block-Einfügungen.

Die text-align-Eigenschaft hat logische Werte, die sich auf die Textrichtung beziehen — anstatt left und right zu verwenden, können Sie start und end verwenden. Im untenstehenden Beispiel ist text-align: right im ersten Block gesetzt und text-align: end im zweiten.

Wenn Sie den Wert von direction auf rtl ändern, sehen Sie, dass die Ausrichtung beim ersten Block rechts bleibt, aber im zweiten Block zum logischen Ende auf der linken Seite geht.

Dies funktioniert konsistenter, wenn Sie Box-Ausrichtung verwenden, die Start und Ende anstelle von physischen Richtungen für die Ausrichtung verwendet.