Explication détaillée de l'utilisation et de la définition de l'attribut de direction CSS

CSS directionLes attributs sont simples et faciles à retenir, avec de faibles valeurs d'attribut et une bonne compatibilité. Cela évite des soucis et des efforts dans les moments critiques. Il est temps de le promouvoir auprès de tout le monde et de ne pas le faire. enterrer les compétences particulières des autres.

Syntaxe :

direction : ltr | rtl | inherit

Paramètres :
ltr : Flux de texte de gauche à droite
rtl : Flux de texte de droite à gauche
hériter : Texte La valeur du flux ne peut pas être héritée

Description :
est utilisé pour définir la direction du flux du texte.
Si vous souhaitez appliquer l'attribut direction au texte en ligne, vous devez définir l'attribut unicode-bidi pour intégrer ou remplacer le bidi.
La fonctionnalité de script correspondante est la direction. Veuillez consulter les autres livres que j'ai écrits.

Exemple :

div { direction: rtl; unicode-bidi: bidi-override; }

En gros, tout le monde n'a qu'à se soucier des deux valeurs d'attribut suivantes :

direction: ltr;   // 默认值direction: rtl;

Où, ltr est la valeur initiale signifie de gauche à droite, ce qui signifie de gauche à droite. Pour le décrire plus précisément, cela signifie que le contenu en ligne est organisé de gauche à droite. C'est ainsi que nous traitons habituellement les pages Web. images, par défaut, celle avec DOM en premier est affichée à gauche.

rtl est une autre valeur. L'abréviation de droite à gauche signifie de droite à gauche. Pour le décrire en détail, le contenu en ligne est disposé de droite à gauche. signifie que pour les deux images avant et après, par défaut, celle avec le DOM devant est affichée à droite et elle se trouve à l'extrémité droite du conteneur ;

Par exemple, mm1 est Zhang Hanyun, et la structure du DOM est la suivante :

<p class="rtl"><img  src="mm1.jpg" alt="Explication détaillée de l'utilisation et de la définition de l'attribut de direction CSS" > <img  src="mm2.jpg" alt="Explication détaillée de l'utilisation et de la définition de l'attribut de direction CSS" ></p>

En conséquence, la sœur de Zhang a couru vers l'extrême droite au lieu de la gauche. temps, il semble que le conteneur soit aligné à droite, comme le montre la capture d'écran ci-dessous :

Ce qui change, c'est uniquement l'ordre gauche et droit de l'élément inline block
Il est à noter que lorsque la valeur de l'attribut direction est rtl, notre texte L'ordre avant et après n'a pas changé, par exemple :

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

Le résultat est que span1 est toujours à gauche et span2 est à droite :

car seul le contenu a changé L'ordre gauche et droit du bloc d'éléments en ligne Tout le texte, même s'il est séparé. par les balises en ligne, est en fait une boîte en ligne homogène et est traitée dans son ensemble, il n'y a donc qu'un effet d'alignement approximatif à droite, et chaque texte est en fait il n'y a aucun changement dans l'ordre gauche et droit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!