Testen Sie Ihre Fähigkeiten: Schreibmodi und logische Eigenschaften

Ziel dieses Fähigkeitstests ist es zu beurteilen, ob Sie verstehen, wie man verschiedene Textausrichtungen mit Schreibmodi und logischen Eigenschaften in CSS handhabt.

Hinweis: Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie steckenbleiben, können Sie sich an uns über einen unserer Kommunikationskanäle wenden.

Aufgabe 1

In dieser Aufgabe wird das Kästchen mit einem horizontalen Schreibmodus angezeigt. Können Sie eine Zeile CSS hinzufügen, um es so zu ändern, dass es einen vertikalen Schreibmodus mit Text von rechts nach links verwendet?

Ihr Endergebnis sollte wie das Bild unten aussehen:

Ein Kästchen mit einem vertikalen Schreibmodus

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Turn me on my side.</div>

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

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Sie sollten die Eigenschaft writing-mode mit dem Wert vertical-rl für ein vertikales Schreibsystem von rechts nach links verwenden:

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  writing-mode: vertical-rl;
}

Aufgabe 2

In dieser Aufgabe möchten wir, dass Sie logische Eigenschaften verwenden, um width und height zu ersetzen, um das Seitenverhältnis des Kästchens beizubehalten, während es vertikal gedreht wird.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Zwei Kästchen eines horizontal das andere vertikal

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Horizontal.</div>
<div class="box vertical">Vertical.</div>

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

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 200px;
  height: 100px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Zusätzlich zur Einstellung writing-mode: vertical-rl auf dem .vertical Kästchen müssen Sie die Eigenschaften inline-size und block-size anwenden, um width und height zu ersetzen:

css

.box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  inline-size: 200px;
  block-size: 100px;
}
.vertical {
  writing-mode: vertical-rl;
}

Aufgabe 3

In dieser Aufgabe möchten wir, dass Sie logische Versionen der Rand-, Rahmen- und Abstands-Eigenschaften verwenden, damit sich die Kanten des Kästchens auf den Text beziehen, anstatt oben, links, unten und rechts zu folgen.

Ihr Endergebnis sollte wie das Bild unten aussehen:

Zwei Kästchen eines horizontal das andere vertikal mit verschiedenen Rand-, Rahmen- und Abstand

Versuchen Sie, den untenstehenden Code zu aktualisieren, um das fertige Beispiel nachzubilden:

html

<div class="box">Horizontal.</div>
<div class="box vertical">Vertical.</div>

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

.vertical {
  writing-mode: vertical-rl;
}

css

.box {
  width: 150px;
  height: 150px;
  border-top: 5px solid rebeccapurple;
  border-right: 5px solid grey;
  border-bottom: 5px dotted red;
  border-left: 5px dotted blue;
  padding-top: 40px;
  margin-bottom: 30px;
}

Klicken Sie hier, um die Lösung anzuzeigen

Um dies zu lösen, benötigen Sie ein Verständnis der logischen, durch den Fluss relativ zugeordneten Mappings für Rand-, Rahmen- und Abstands-physikalische Eigenschaften:

css

.box {
  width: 150px;
  height: 150px;
  border-block-start: 5px solid rebeccapurple;
  border-inline-end: 5px solid grey;
  border-block-end: 5px dotted red;
  border-inline-start: 5px dotted blue;
  padding-block-start: 40px;
  margin-block-end: 30px;
}

Siehe auch

CSS Stilbasics