Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Detaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs

黄舟
Freigeben: 2017-06-20 09:56:32
Original
2342 Leute haben es durchsucht

CSS RichtungDie Attribute sind einfach und leicht zu merken, mit niedrigen Attributwerten und guter Kompatibilität. Es ist an der Zeit, es allen bekannt zu machen begraben Sie die besonderen Fähigkeiten anderer Menschen.

Syntax:

direction : ltr | rtl | inherit
Nach dem Login kopieren

Parameter:
ltr: Textfluss von links nach rechts
rtl: Textfluss von rechts nach links
inherit: Text Der Wert des Flusses kann nicht vererbt werden

Beschreibung:
wird verwendet, um die Richtung des Textflusses festzulegen.
Wenn Sie das Richtungsattribut auf Inline-Text anwenden möchten, müssen Sie das Attribut unicode-bidi auf „Einbetten“ oder „Bidi-Override“ setzen.
Die entsprechende Skriptfunktion ist Richtung. Bitte sehen Sie sich andere Bücher an, die ich geschrieben habe.

Beispiel:

div { direction: rtl; unicode-bidi: bidi-override; }
Nach dem Login kopieren

Grundsätzlich muss sich jeder nur um die folgenden zwei Attributwerte kümmern:

direction: ltr;   // 默认值direction: rtl;
Nach dem Login kopieren

Wobei ltr der Anfangswert ist Genauer gesagt bedeutet dies, dass der Inline-Inhalt von links nach rechts angeordnet ist. So verarbeiten wir beispielsweise die beiden Seiten Bilder, standardmäßig wird links das Bild mit DOM zuerst angezeigt.

RTL ist eine Abkürzung für „von rechts nach links“, um es im Detail zu beschreiben. Es wird der Anwendung hinzugefügt Die Anweisung bedeutet, dass für die beiden Bilder davor und danach standardmäßig das Bild mit dem DOM davor rechts angezeigt wird und es sich am rechten Ende des Containers befindet.

Mm1 ist beispielsweise Zhang Hanyun und die DOM-Struktur ist wie folgt:

<p class="rtl"><img  src="mm1.jpg" alt="Detaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs" > <img  src="mm2.jpg" alt="Detaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs" ></p>
Nach dem Login kopieren

Infolgedessen rannte Zhangs Schwester ganz nach rechts statt nach links Gleichzeitig scheint es, dass der Container rechtsbündig ist, wie im Screenshot unten gezeigt:

Detaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs

Was sich ändert, ist nur die linke und rechte Reihenfolge des Inline-Elements block
Es ist zu beachten, dass, wenn der Wert des Richtungsattributs rtl ist, unser Text Die Reihenfolge davor und danach hat sich nicht geändert, zum Beispiel:

<p class="rtl"><span>span1</span> <span>span2</span></p>
Nach dem Login kopieren

Das Ergebnis ist span1 ist immer noch auf der linken Seite und span2 ist auf der rechten Seite:

Detaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs

, da sich nur der Inhalt geändert hat. Die linke und rechte Reihenfolge des Inline-Elementblocks. Der gesamte Text, auch wenn er getrennt ist Durch Inline-Tags handelt es sich tatsächlich um ein homogenes Inline-Feld, das als Ganzes behandelt wird. Daher gibt es nur einen ungefähren Rechtsausrichtungseffekt, und jeder Text ändert sich tatsächlich nicht in der linken und rechten Reihenfolge.


Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung und Definition des CSS-Richtungsattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage