Compréhension approfondie des attributs position, float et display en CSS, ainsi que de la relation entre les trois

Cet article parle principalement des attributs position, float et display en CSS, ainsi que de la relation entre les attributs position, float et display. Les amis dans le besoin peuvent s'y référer. J'espère qu'il pourra vous aider.

Attribut position :

L'attribut position indique la méthode de positionnement d'un élément. Il y a 4 valeurs possibles : statique, relative, absolue ou fixe :

statique : Valeur par défaut, les éléments sont rendus dans l'ordre dans lequel ils apparaissent dans le flux documentaire
absolu : Positionnement absolu, l'élément est relatif à son premier élément ancêtre positionné (non statique)
fixe : l'élément est positionné par rapport à la fenêtre du navigateur
relatif : l'élément est positionné par rapport à sa position normale, donc "left:20" signifie dans Basé sur le position normale de l'élément, déplacez-le de 20 pixels vers la gauche.

attribut float :

L'attribut float définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit.
Si des éléments flottants non remplacés, spécifiez une largeur explicite, sinon ils sont rendus aussi étroits que possible.
Remarque : s'il y a très peu d'espace pour un élément flottant sur une ligne, l'élément passera à la ligne suivante et ce processus se poursuivra jusqu'à ce qu'une certaine ligne dispose de suffisamment d'espace.

aucun : valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.
Gauche : L'élément flotte vers la gauche.
Droite : L'élément flotte vers la droite.

attribut display :

L'attribut display spécifie le modèle de boîte (box) utilisé par un élément DOM. c'est-à-dire le type de boîte que l'élément doit générer.

En ligne : par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément.
Aucun : Cet élément ne sera pas affiché.
Bloc : cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après cet élément.
inline-block : élément de bloc en ligne. Cette valeur amène un élément à générer une boîte de bloc et à se présenter comme une seule boîte en ligne, similaire à un élément remplacé. Un élément dont la valeur d'affichage est inline-block forme un modèle de boîte de bloc en interne et se forme lui-même comme un élément remplacé en ligne, c'est-à-dire qu'un élément dont la valeur d'affichage est inline-block peut définir la hauteur et la largeur comme un élément de bloc et peut être organisé. sur une seule ligne avec des éléments en ligne (tels que du texte). Cet effet peut apporter de la commodité à de nombreux endroits lors de la conception de la page. Le plus courant est lors de la conception de la navigation. Il peut être centré comme un élément en ligne ou défini comme Définir la taille d'un. menu unique comme l'élément block, et vous pouvez également masquer le texte et afficher l'image d'arrière-plan via text-indent
list-item : Cet élément sera affiché sous forme de liste
table : Cet élément sera affiché. sous forme de tableau au niveau du bloc (semblable à f5d188ed2c074f8b944552db028f98a1), avec des sauts de ligne avant et après le tableau

Modèle de boîte CSS (modèle de boîte) Tout est une boîte

Les éléments div, h1 ou p sont souvent appelés éléments de niveau bloc. Cela signifie que ces éléments apparaissent comme un bloc de contenu, c'est-à-dire une « boîte de bloc ». En revanche, des éléments tels que span et strong sont appelés. "éléments en ligne" car leur contenu apparaît en lignes, c'est-à-dire une "boîte en ligne".

Vous pouvez utiliser l'attribut display pour changer le type de boîte générée. block, vous pouvez créer un élément en ligne (tel que l'élément 3499910bf9dac5ae3c52d5ede7383485). Vous pouvez également faire en sorte que l'élément généré n'ait aucune boîte en définissant display sur none. La boîte et tout son contenu ne seront pas affichés et ne prendront pas de place dans le document. Dans un cas, des éléments au niveau du bloc sont créés même s'ils ne sont pas explicitement définis. Cela se produit lorsqu'un texte est ajouté au début d'un bloc. -level (comme un div), même si le texte n'est pas défini comme un paragraphe. Il est également traité comme un paragraphe :

<div> 
some text 
<p>Some more text.</p> 
</div>

Dans ce cas, la boîte est appelée une boîte de bloc sans nom. car il n'est pas associé à un élément spécifiquement défini. 🎜>Attributs CSS : la relation entre display, position et float

Si l'attribut display d'un élément est défini sur none, alors la case correspondant à l'élément ne sera pas générée. Dans ce cas, float et position sont ignorés.
Sinon (l'affichage n'est pas none), si la position. L'attribut d'un élément est défini sur absolu ou fixe (les deux sont à positionnement absolu). Dans ce cas, float est ignoré (la valeur calculée de float est nulle) et la valeur de l'attribut d'affichage est automatiquement calculée selon le tableau suivant. La position de la boite dépend des attributs top, right, bottom, left et du conteneur de la boite
Sinon (l'affichage n'est pas nul, et la position n'est ni absolue ni fixe), si la valeur de float n'est pas nulle ( est à gauche ou à droite), alors la case Il est flottant et la valeur d'affichage est calculée selon le tableau suivant
Sinon (l'affichage n'est pas nul, et la position n'est pas absolue ou fixe, float n'est aucun), si l'élément est l'élément racine, la valeur d'affichage est calculée selon le tableau suivant. (Il y a une exception dans ce cas : défini dans CSS2.1, lorsque la valeur d'affichage spécifiée est un élément de liste, la valeur d'affichage dans le résultat du calcul est un bloc ou un élément de liste)
Sinon (l'affichage n'est aucun , Et la position est non absolue, fixe, float n'est aucun et n'est pas l'élément racine), elle sera alors affichée en fonction de la valeur de l'attribut d'affichage spécifiée.

Conversion de l'attribut d'affichage du tableau :

valeur spécifiée en ligne dans le tableau
valeur spécifiée en ligne, groupe de lignes de tableau, colonne de tableau, colonne de tableau -group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block Convertir en bloc
Toute autre valeur spécifiée restera inchangée.

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!