Logische Eigenschaften für Fließverhalten und Positionierung
Das CSS-Modul für logische Eigenschaften und Werte enthält logische Zuordnungen für die physikalischen Werte von float
und clear
, sowie für die Positionierungseigenschaften, die bei positioniertem Layout verwendet werden. Dieser Leitfaden zeigt, wie diese verwendet werden können.
Zuordnungen von Eigenschaften und Werten
Die folgende Tabelle zeigt die logischen Eigenschaften und Werte, die in diesem Leitfaden besprochen werden, zusammen mit ihren physikalischen Eigenschaften und Wertzuordnungen. Sie gehen von einem horizontalen writing-mode
mit einer Links-nach-Rechts-Richtung aus.
Logische Eigenschaft oder Wert | Physikalische 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 Kurzschreibweisen, die durch die Möglichkeit entstehen, Block- und Inline-Dimensionen anzusprechen. Diese haben keine Zuordnung zu physikalischen Eigenschaften, abgesehen von der inset
-Eigenschaft.
Logische Eigenschaft | Zweck |
---|---|
inset-inline |
Setzt gleichzeitig beide oben genannten Einfügewerte für die Inline-Dimension. |
inset-block |
Setzt gleichzeitig beide oben genannten Einfügewerte für die Block-Dimension. |
inset |
Setzt alle vier Einfügewerte gleichzeitig mit physikalischer Zuordnung mehrerer Werte. |
Beispiel für Float und Clear
Die physikalischen Werte, die mit den Eigenschaften float
und clear
verwendet werden, sind left
, right
und both
. Das Modul für CSS-logische Eigenschaften und Werte definiert die Werte inline-start
und inline-end
als Zuordnungen für left
und right
.
Im folgenden Beispiel wird das erste Feld mit float: left
gefloatet und das zweite mit float: inline-start
. Wenn Sie direction: rtl
auf den .inner
-Selektor anwenden, bleibt das linksgestapelte Feld immer auf der linken Seite, während das inline-start
-gestapelte Element der direction
des Textes folgt. Sie können dies mit writing-mode: vertical-rl
kombinieren, um den Unterschied im Block-Layout in Kombination mit den direction
-Werten zu sehen.
<div class="container">
<div class="inner">
<div class="physical box"></div>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale.
</div>
<div class="inner">
<div class="logical box"></div>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale.
</div>
</div>
.inner {
/* direction: rtl; */
/* writing-mode: vertical-rl; */
}
.physical {
float: left;
}
.logical {
float: inline-start;
}
Beispiel: Einfüge-Eigenschaften für positioniertes Layout
Die CSS-Positionierung ermöglicht es uns im Allgemeinen, ein Element relativ zu seinem umgebenden Block zu positionieren – wir setzen im Wesentlichen das Element relativ zu seiner normalen Flussposition ein. Um ein Element relativ zum Ansichtsfenster zu positionieren, verwenden Sie die physikalischen Eigenschaften top
, right
, bottom
und left
. Wenn Sie möchten, dass sich die Positionierung auf den Textfluss in Ihrem 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 das blaue Feld mit absoluter Positionierung innerhalb des Bereichs mit der grau gepunkteten Grenze 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 das flussnahe Feld mit der Textausrichtung bleibt.
<div class="container">
<div class="inner">
<div class="physical box"></div>
</div>
<div class="inner">
<div class="logical box"></div>
</div>
</div>
.inner {
writing-mode: horizontal-tb;
}
.physical {
position: absolute;
top: 20px;
right: 0;
}
.logical {
position: absolute;
inset-block-start: 20px;
inset-inline-end: 0;
}
Neue Kurzschreibweisen für zwei und vier Werte
Wie bei anderen Eigenschaften im Modul haben wir Kurzschreibweisen, die es ermöglichen, zwei oder vier Werte auf einmal zu setzen.
inset
— setzt alle vier Seiten zusammen mit physikalischer Zuordnung.inset-inline
— setzt beide logischen Inline-Einfügungen.inset-block
— setzt beide logischen Block-Einfügungen.
Beispiel: Logische Werte für Textausrichtung
Die text-align
-Eigenschaft hat logische Werte, die sich auf die Textrichtung beziehen – anstelle von left
und right
können Sie start
und end
verwenden. Im untenstehenden Beispiel ist text-align: right
im ersten Block eingestellt und text-align: end
im zweiten.
Wenn Sie den Wert von direction
auf rtl
ändern, sehen Sie, dass die Ausrichtung für den ersten Block rechts bleibt, aber im zweiten zum logischen Ende auf der linken Seite wechselt.
<div class="container">
<div class="inner physical">Aligned text</div>
<div class="inner logical">Aligned text</div>
</div>
.inner {
direction: ltr;
}
.physical {
text-align: right;
}
.logical {
text-align: end;
}
Dies funktioniert konsistenter, wenn Box-Ausrichtung verwendet wird, die Start und Ende anstelle von physikalischen Richtungen für die Ausrichtung verwendet.