Analyse de la distance de décalage du bord CSS par rapport aux valeurs de possibilité gauche et droite

Cet article présente principalement l'analyse des valeurs possibles de gauche et de droite pour la distance de décalage des bords du CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. >

La distance de décalage des bords du CSS joue un certain rôle dans la mise en page. Vous trouverez ci-dessous une brève introduction à toutes les valeurs possibles de gauche et de droite. Si vous êtes intéressé, vous pouvez vous référer à cet article, qui peut être. utile pour vous d'apprendre le CSS

1). Les valeurs définies de "gauche" et "droite" sont toutes deux "auto"

Si les valeurs de "gauche" et "droite" sont tous deux "auto" (leurs valeurs initiales), la valeur calculée ( valeur calculée ) est 0 (c'est-à-dire que la boîte reste dans sa position d'origine). 2). La valeur de réglage de « gauche » ou « droite » est « auto »
Si gauche est « auto », la valeur calculée est la valeur négative de droite (par exemple, la zone de la boîte est basée sur la valeur de droite. décalé vers la gauche). Si right est spécifié comme « auto », sa valeur calculée est le négatif de la valeur de gauche.
Exemple de code :

<p style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></p>

Dans le code ci-dessus, l'élément p est un élément relativement positionné, sa valeur « gauche » est « 100px », « droite » n'est pas définie et la valeur par défaut est "auto". Ensuite, la valeur calculée de la propriété 'right' doit être -left, c'est-à-dire "right:-100px".

3). Ni les valeurs de réglage « gauche » ni « droite » ne sont « auto »

Si ni « gauche » ni « droite » ne sont « auto », alors le positionnement semblera loin. -récupérés, dont un a dû être abandonné. Si l'attribut « direction » du bloc conteneur est « ltr », alors « gauche » l'emportera et la valeur « droite » devient -gauche. Si l'attribut « direction » du bloc conteneur est « rtl », alors « droite » l'emporte et la valeur « gauche » est ignorée.
Exemple de code :

<p style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> 
<p style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></p> 
</p>

Enfin, « gauche » devrait être plus fort.

Valeurs des attributs 'top' et 'bottom'
Les attributs 'top' et 'bottom' déplacent un élément relativement positionné vers le haut ou vers le bas sans changer sa taille. « top » déplace la boîte vers le bas et « bottom » la fait monter. Puisque 'top' et 'bottom' n'entraînent pas la division ou l'étirement de la boîte, la valeur calculée est toujours top=-bottom. Si les deux sont "auto", la valeur calculée sera 0. Si l'un d'eux est auto , qui est la valeur négative de l’autre. Si ni l'un ni l'autre n'est "auto", "bottom" est ignoré et la valeur calculée de "bottom" sera la valeur négative de la valeur "top".

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode d'affichage centré réactif de l'image de la bannière CSS

Comment utiliser les valeurs de marge négatives ​​en CSS pour ajuster la position centrale

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!