Explication détaillée de l'influence mutuelle des valeurs des attributs display/float/position en CSS

Il existe trois propriétés liées à la mise en page et à la création de boîtes : 'display', 'position' et 'float', qui interagissent entre elles comme suit :

Si la valeur de 'display' est 'none' , alors 'position' et 'float' n'ont aucun effet. Dans ce cas, aucune boîte n'est générée.

Sinon, Si la valeur de 'position' est 'absolue' ou 'fixe', la boîte est en position absolue et la valeur calculée de 'float' est 'aucun', la valeur de 'display' est définie comme indiqué ci-dessous. La position de la boîte sera déterminée par les propriétés 'top', 'right', 'bottom' et 'left' et son bloc conteneur.

Sinon, Si la valeur de « float » n'est pas « none », la boîte flotte et la valeur de « display » est définie comme indiqué ci-dessous.

Sinon, Si l'élément est l'élément racine, la valeur de 'display' est définie comme suit (sauf pour la valeur spécifiée par list-item, qui est calculé comme 'block' ou 'list-item', non défini dans CSS2.1 )

Sinon, dans les autres cas, la valeur de 'display'. l'attribut est ce qu'il spécifie la valeur.

où inline-flex et flex sont de nouvelles valeurs d'attribut introduites par le module de mise en page élastique CSS3.

En résumé, l'attribut d'affichage des éléments de contenu dans les conteneurs de positionnement absolu, de disposition flexible et de disposition en grille sera bloqué.

L'article ci-dessus discute brièvement de l'influence mutuelle des valeurs d'attribut display/float/position​​en CSS. C'est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et je. J'espère également que tout le monde soutiendra le site Web chinois PHP.

Pour des explications plus détaillées sur l'influence mutuelle des valeurs des attributs display/float/position en CSS, veuillez faire attention au site Web PHP chinois pour les articles connexes !