Logische Eigenschaften für Floating und Positionierung

Die folgende Tabelle zeigt die in diesem Leitfaden behandelten logischen Eigenschaften und Werte zusammen mit ihren Zuordnungen zu den physikalischen Eigenschaften und Werten. Sie gehen von einem horizontalen writing-mode und einer von links nach rechts gerichteten Richtung aus.

Zusätzlich zu diesen zugeordneten Eigenschaften gibt es einige zusätzliche Kurzschreibweisen, die möglich werden, indem man Block- und Inline-Dimensionen ansprechen kann. Diese haben keine Zuordnung zu physikalischen Eigenschaften, abgesehen von der inset-Eigenschaft.

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 die erste Box mit float: left gefloatet und die zweite mit float: inline-start. Wenn Sie auf den .inner-Selektor direction: rtl anwenden, bleibt die links gefloatete Box immer links, während das inline-start-gefloatete Element der direction des Textes folgt. Sie können dies mit writing-mode: vertical-rl kombinieren, um den Unterschied der Block-Layout-Orientierung in Kombination mit 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>

body {
  font: 1.2em / 1.5 sans-serif;
}
.container {
  display: flex;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  margin: 10px;
  width: 100px;
  height: 100px;
}

.inner {
  /* direction: rtl; */
  /* writing-mode: vertical-rl; */
}

.physical {
  float: left;
}

.logical {
  float: inline-start;
}

Die CSS-Positionierung erlaubt es uns im Allgemeinen, ein Element in einer Weise relativ zu seinem umgebenden Block zu positionieren — wir setzen das Element im Wesentlichen relativ zu seinem normalen Fluss ein. Um ein Element relativ zum Ansichtfenster 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 die blaue Box mit absoluter Positionierung innerhalb des Bereichs mit der grauen, gepunkteten Begrenzung zu positionieren, der position: relative hat. Ändern Sie die Eigenschaft writing-mode zu vertical-rl oder fügen Sie direction: rtl hinzu und sehen Sie, wie die relativ zum Fluss positionierte Box mit der Textrichtung bleibt.

<div class="container">
  <div class="inner">
    <div class="physical box"></div>
  </div>
  <div class="inner">
    <div class="logical box"></div>
  </div>
</div>

.container {
  display: flex;
}

.inner {
  width: 200px;
  height: 200px;
  position: relative;
  border: 2px dotted grey;
}

.box {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 10px;
  width: 100px;
  height: 100px;
}

.inner {
  writing-mode: horizontal-tb;
}

.physical {
  position: absolute;
  top: 20px;
  right: 0;
}

.logical {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 0;
}

Wie bei anderen Eigenschaften im Modul, haben wir auch Kurzschreibweisen, die es ermöglichen, zwei oder vier Werte auf einmal zu setzen.

• inset — setzt alle vier Seiten gemeinsam mit physikalischer Zuordnung.
• inset-inline — setzt beide logischen Inline-Insets.
• inset-block — setzt beide logischen Block-Insets.

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

Wenn Sie den Wert der direction auf rtl ändern, sehen Sie, dass die Ausrichtung im ersten Block rechts bleibt, aber im zweiten Block zum logischen Ende links wechselt.

<div class="container">
  <div class="inner physical">Aligned text</div>
  <div class="inner logical">Aligned text</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  display: flex;
}

.inner {
  width: 200px;
  border: 2px dotted grey;
  padding: 10px;
}

.inner {
  direction: ltr;
}

.physical {
  text-align: right;
}

.logical {
  text-align: end;
}

Dies funktioniert konsistenter, wenn man Box-Anpassungen verwendet, die Start und Ende anstelle von physikalischen Richtungen für die Anpassung verwenden.