Ausführliche Erklärung zur Verwendung der Richtung in CSS

1.

In normalen Anwendungen achte ich selten auf die Verwendung der CSS-Richtung. Heute habe ich gelegentlich relevante Inhalte gesehen und festgestellt, dass die Verwendung der CSS-Richtung oft sehr praktisch ist.

2. Zunächst müssen wir auf zwei wichtige Inhalte achten:

direction:ltr;//这个是默认值
direction:rtl

ltr ist der Anfangswert, der von links nach rechts bedeutet von links nach rechts. rtl ist ein weiterer Wert, die Abkürzung für right-to-left, was von rechts nach links bedeutet.

<p class="rtl">
	<img src="1.png"/>
	<img src ="2.png"/>
</p>

Wenn die Richtung für p auf das Trl-Attribut eingestellt ist, ist 1.png aktiviert auf der rechten Seite, 2.png ist auf der linken Seite.

Es ist zu beachten, dass bei gesetztem RTL-Attribut die Reihenfolge des Textes unverändert bleibt:

<p class="rtl"><span>span1</span> <span>span2</span></p>

Da nur die linke und rechte Reihenfolge des Inline-Elementblocks geändert wird, wird der gesamte Text angezeigt, auch wenn er durch Inline getrennt ist Tags, Tatsächlich handelt es sich immer noch um ein homogenes Inline-Feld, das als Ganzes behandelt wird. Daher gibt es nur einen ungefähren Rechtsausrichtungseffekt, es gibt jedoch keine Änderung in der linken und rechten Reihenfolge jedes Textes.

Was ist also ein „Inline-Elementblock“? Einschließlich ersetzter Elemente wie a1f02c36ba31691bcfe87b2722de723b, bb9345e55eb71822850ff156dfde57c8, d5fd7aea971a85678ba271703566ebfd, 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95 usw. oder horizontaler Inline-Block-Elemente. Daher ändert sich in den obigen Beispielen von span1 und span2 die linke und rechte Reihenfolge, wenn ein Span auf display:inline-block gesetzt ist.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der Richtung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!