Comment contrôler le masquage et l'affichage dans l'affichage CSS

La propriété Display du CSS est utilisée pour définir le mode d'affichage des éléments. Vous pouvez l'utiliser pour contrôler des aspects tels que la visibilité, la disposition et la taille des éléments, c'est donc très courant dans les applications CSS.

Paramètres d'affichage CSS

En CSS, la propriété Display peut accepter les valeurs suivantes :

• none
#🎜 🎜#inline
• block
• inline-block
• table
• table-cell
• #🎜🎜 #table -row
• inline-table
• flex
• grid
• Il est à noter que la différence Les attributs d'affichage pris en charge par les éléments sont également différents, vous devez donc choisir la valeur d'attribut appropriée en fonction de la situation réelle.

CSS Display none

Utilisez Display:none pour masquer complètement l'élément. Cela signifie que l’élément n’occupe aucun espace sur la page et n’a aucun impact sur les autres éléments. Cette fonctionnalité est très utile dans le développement Web où les éléments HTML doivent être affichés ou masqués dynamiquement.

CSS Display inline

Utilisez Display:inline pour afficher les éléments en tant qu'éléments en ligne, c'est-à-dire qu'ils seront disposés sur la même ligne comme du texte ordinaire. Il ignore les attributs de largeur et de hauteur de l'élément et les affiche uniquement en fonction de la taille du contenu.

CSS Display block

Utilisez Display:block pour afficher les éléments en tant qu'éléments de niveau bloc, c'est-à-dire qu'ils occuperont leur propre ligne sur la page. Cette fonctionnalité est très utile car elle nous permet d'avoir une disposition plus spécifique des éléments HTML.

CSS Display inline-block

Utilisez Display:inline-block pour afficher les éléments à la fois en tant qu'éléments en ligne et éléments au niveau du bloc, c'est-à-dire qu'ils seront disposés sur le même line , mais les attributs tels que la taille peuvent être définis comme des éléments au niveau du bloc.

CSS Display table

Utilisez Display:table pour afficher les éléments sous forme de tableau. Cela signifie que l'élément contiendra un en-tête, un corps et un pied de page et pourra être défini à l'aide des propriétés associées du tableau.

CSS Display table-cell

Utilisez Display:table-cell pour afficher un élément en tant que cellule de tableau, c'est-à-dire que l'élément deviendra une cellule du tableau. Il peut ajuster automatiquement la largeur et la hauteur entre les colonnes et les lignes, c’est donc très utile.

CSS Display table-row

Utilisez Display:table-row pour afficher un élément sous forme de ligne de tableau, c'est-à-dire que l'élément deviendra une ligne dans le tableau. C'est également très utile car cela vous permet d'avoir une disposition plus spécifique des lignes du tableau.

CSS Display inline-table

Utilisez Display:inline-table pour afficher les éléments à la fois sous forme d'éléments en ligne et de tableaux. Cela nous permet de créer un tableau dans un élément en ligne.

CSS Display flex

Utilisez Display:flex pour transformer un élément en boîte flexible. Cela signifie que les éléments du conteneur peuvent être alignés, disposés et ajoutés/supprimés à votre guise.

CSS Display Grid

Utilisez Display:grid pour faire d'un élément un conteneur de grille. Cela signifie que vous pouvez diviser la page en grille et placer les éléments dans différentes tailles et positions, ce qui est extrêmement utile.

CSS Display masque et affiche des éléments

Une fonctionnalité importante de CSS Display est qu'il peut être utilisé pour masquer ou afficher des éléments HTML. Affichage : Aucun est souvent utilisé pour masquer et afficher des éléments.

Lorsque le code suivant prendra effet, l'élément sera masqué :

display: none;

Lorsque vous devez afficher l'élément, définissez simplement l'attribut Display sur la valeur appropriée, par exemple : # 🎜🎜#

display: block;

Cela permettra à l'élément de s'afficher à nouveau.

Conclusion

La propriété CSS Display est très importante dans le développement Web et peut être utilisée pour contrôler la mise en page, la visibilité et la taille des éléments afin de réaliser des conceptions de pages complexes. Comprendre les différentes valeurs d'affichage et leurs cas d'utilisation est une étape importante dans la maîtrise des compétences CSS de base.

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!