Propriété d'affichage CSS | Expliqué

Les éléments HTML sont généralement divisés en deux classes qui sont; Éléments en ligne et éléments au niveau du bloc. Les éléments en ligne ne consomment que l'espace requis sur une page Web, cependant, les éléments au niveau du bloc consomment tout l'espace horizontal. Ceci est considéré comme leur comportement d'affichage qui peut être modifié à l'aide de la propriété d'affichage CSS. Cet article est destiné à éclairer ses lecteurs sur les détails de la propriété d'affichage.

Affichage des biens

Comme son nom l'indique, la propriété d'affichage CSS définit comment les éléments HTML sont affichés sur une page Web. Cette propriété peut être très utile lorsque vous souhaitez modifier le comportement habituel d'un élément HTML. Supposons, pour une raison quelconque, vous souhaitez échanger l'état d'un élément en ligne à celui d'un élément au niveau du bloc, vous pouvez utiliser cette propriété pour rendre ce changement.

Syntaxe

Affichage: valeur;

Ici, nous avons démontré certaines valeurs de propriété d'affichage pour votre meilleure compréhension.

Éléments en ligne

Les éléments qui ne consomment que la quantité d'espace requis sont appelés éléments en ligne. Ils peuvent également être appelés éléments affichés dans une ligne.Ces éléments ne commencent pas à partir d'une nouvelle ligne, vous pouvez en outre placer plusieurs éléments en ligne dans la même ligne. Certains exemples sont ,,, etc.

Comment convertir les éléments au niveau des blocs en éléments en ligne à l'aide de la propriété d'affichage

Dans cet exemple, nous créons trois éléments et définissons la valeur de la propriété d'affichage comme «en ligne», par conséquent, tous les éléments seront affichés en une seule ligne et ne consommeront que la quantité d'espace requis.

Sortir

Bien que l'élément par défaut soit un élément au niveau du bloc, mais lorsque vous définissez la valeur de la propriété d'affichage sur «en ligne», il se comportera comme un élément en ligne.

Éléments au niveau des blocs

Les éléments qui consomment tout l'espace disponible (de gauche à droite) et commencent à partir d'une nouvelle ligne sont considérés comme des éléments de niveau de bloc. Les éléments de niveau de bloc sont capables de maintenir des éléments en ligne ainsi que d'autres éléments de niveau de bloc. La majorité des éléments de HTML sont des éléments de niveau de bloc. Certains exemples sont ,

,

, etc.

Comment convertir les éléments en ligne en éléments au niveau des blocs à l'aide de la propriété d'affichage

Pour le bien de cet exemple, nous considérerons deux éléments et définirons la valeur de la propriété d'affichage sur «Bloquer». En conséquence, les deux éléments consommeront tout l'espace horizontal, agissant comme des éléments au niveau du bloc. Bien que l'élément par défaut soit un élément en ligne.

Sortir

Affichage flexible

Cette valeur ajuste efficacement les éléments à l'intérieur d'un conteneur. Il distribue également l'espace entre les éléments présents dans un conteneur.

Comment fonctionne la valeur flexible de la propriété d'affichage

Dans cet exemple, nous avons illustré la valeur flexible de la propriété d'affichage. Nous avons créé cinq

Éléments à l'intérieur d'un élément ayant une conteste flexible de classe et nous avons attribué la valeur «flex» à la propriété d'affichage du

éléments.

Sortir

Affichage de grille

La valeur de la grille de la propriété d'affichage est utile lors de la disposition des éléments sous la forme d'une grille, en outre, lors de l'utilisation de la grille, il n'est pas nécessaire d'utiliser des flotteurs et de positionner.

Comment fonctionne la valeur de la grille des propriétés d'affichage

Dans cet exemple, nous avons créé six éléments à l'intérieur d'un élément plus grand ayant une conteste de grille de classe et nous avons attribué la valeur «grille» à la propriété d'affichage de la

éléments

Sortir

Il existe de nombreuses autres valeurs qui peuvent être affectées à la propriété d'affichage qui sont les suivantes.

Valeur	Description
en ligne	Cette valeur affiche des éléments en tant qu'éléments en ligne.
bloc	Cette valeur affiche des éléments sous forme d'éléments au niveau des blocs.
Contenu	Cette valeur fait disparaître un conteneur.
fléchir	Cette valeur affiche des éléments sous forme de conteneurs flexibles au niveau des blocs.
grille	Cette valeur affiche des éléments sous forme de conteneurs de grille au niveau de bloc.
bloc en ligne	Cette valeur affiche des éléments en tant que conteneurs de blocs au niveau en ligne.
en ligne	Cette valeur affiche des éléments en tant que conteneurs flexibles au niveau en ligne.
brassard en ligne	Cette valeur affiche des éléments en tant que conteneurs de grille de niveau en ligne.
table en ligne	Cette valeur affiche des tables au niveau en ligne.
liste de listes	Cette valeur affiche tous les éléments dans un élément.
run-in	Cette valeur sur la base du contexte affiche des éléments comme des éléments en ligne ou au niveau du bloc.
tableau	Cette valeur rend des éléments pour se comporter comme éléments. élément. capture de table Cette valeur rend des éléments pour se comporter comme des éléments. groupe de colonne Cette valeur rend des éléments pour se comporter comme un élément. groupe de table-tête Cette valeur rend des éléments pour se comporter comme un élément. group-troupeur de table Cette valeur rend des éléments pour se comporter comme un élément. groupe de table Cette valeur rend des éléments pour se comporter comme un élément. cellule de table Cette valeur rend des éléments pour se comporter comme élément. colonne de table Cette valeur rend des éléments pour se comporter comme un élément. rangée de table Cette valeur rend des éléments pour se comporter comme aucun Cette valeur supprime l'élément entier. initial Cette valeur affiche la valeur par défaut de l'élément. hériter Cette valeur permet à un élément de hériter des propriétés de son élément parent. Pour une meilleure compréhension, vous pouvez essayer d'autres valeurs de propriété d'affichage pour voir comment ils fonctionnent. Conclusion La propriété d'affichage CSS définit comment les éléments HTML sont affichés sur une page Web, en outre, en utilisant cette propriété, vous pouvez modifier le comportement par défaut d'un élément HTML, par exemple, vous pouvez faire un élément en ligne se comporter comme un élément au niveau bloc et vice versa. Il existe une vaste gamme de valeurs que vous pouvez appliquer à la propriété d'affichage, chacune avec un objectif différent. Dans cet article, la propriété d'affichage est discutée en profondeur avec des exemples appropriés. « Des caractères set en html Polices CSS » Powershell Quelles sont les étapes pour exécuter les commandes distantes dans PowerShell? Les commandes distantes peuvent être exécutées en permettant à l'éloignement PowerShell. Pour permet... Lena Martinez Programmation de bash Comment ajouter un nouvel élément à un tableau sans spécifier l'index en bash Pour ajouter un nouvel élément à un tableau sans spécifier l'index dans Bash, utilisez l'opérateur +... Célia Girard C programmation C Comment utiliser le mot-clé d'enregistrement en C En C, le mot clé du registre dirige le compilateur pour déterminer qu'une variable spécifique doit ê... Lola Bonnet Python Python Count Occurrences in List Zoe Martinez Python Python Pas tous les arguments convertis lors du formatage des chaînes Gabriel Bernard golang Comment convertir la corde en type entier dans Golang? Nathan Blanc php Comment utiliser des expressions régulières en php Zoe Martinez php Qu'est-ce qu'une erreur d'index non définie en PHP et comment le réparer? Lena Martinez Docker Quelles sont les étapes pour déployer une image Nginx à l'aide de Docker? Mélissa Vincent Oracle Linux Quelle est la différence entre Oracle VirtualBox et VMware? Ines Dubois Docker En quoi Docker diffère-t-il de Docker Desktop? Lena Dupuy php Comment utiliser la fonction PHP Getdate Ethan Guillot php Pourquoi PHP devrait être utilisé dans le développement Web Nathan Blanc