Quelles sont les valeurs des attributs d'affichage en CSS ?

Les valeurs des attributs d'affichage en CSS incluent inline, block, inline-block, none, flex, grid, table, inline-table, list-item ou hériter, etc. Introduction détaillée : 1. en ligne, l'élément est affiché comme un élément en ligne et est affiché sur la même ligne que l'élément adjacent. Les attributs width et height n'ont aucun effet, et les attributs margin et padding ne peuvent définir que les valeurs gauche et droite. ; 2. bloc, l'élément est Show etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

L'attribut display en CSS est utilisé pour définir la façon dont les éléments sont affichés. Il détermine la façon dont les éléments sont présentés sur la page. L'attribut display a les valeurs d'attribut communes suivantes :

1. inline : l'élément est affiché en tant qu'élément en ligne, affiché sur la même ligne que les éléments adjacents. Les attributs width et height n'ont aucun effet et les attributs margin et padding ne peuvent définir que les valeurs gauche et droite. Les éléments en ligne courants incluent span, a, img, etc.

2. bloc : L'élément est affiché comme un élément de niveau bloc et occupe une ligne exclusive. Les attributs de largeur et de hauteur peuvent être définis, et les attributs de marge et de remplissage peuvent être définis dans quatre directions. Les éléments courants au niveau du bloc incluent div, p, h1, etc.

3. inline-block : l'élément est affiché comme un élément de niveau bloc en ligne, affiché sur la même ligne que les éléments adjacents. Les attributs de largeur et de hauteur peuvent être définis, et les attributs de marge et de remplissage peuvent être définis dans quatre directions. Les éléments courants au niveau des blocs en ligne incluent les boutons, les entrées, etc.

4. aucun : L'élément n'est pas affiché, c'est-à-dire qu'il est masqué. Les éléments n'occupent aucun espace sur la page et ne répondent pas aux événements d'interaction.

5. flex : utilisez une mise en page flexible pour afficher les éléments, permettant une mise en page flexible. Il permet aux éléments de se redimensionner et de se positionner automatiquement en fonction de l'espace disponible. Habituellement utilisé avec flex-direction, flex-wrap et d'autres propriétés.

6. grille : utilisez la disposition en grille pour afficher les éléments et placer les éléments dans une grille bidimensionnelle. La disposition en grille offre un contrôle de disposition plus précis et peut définir la taille, l'espacement, etc. des lignes et des colonnes. Généralement utilisé avec les colonnes de modèle de grille, les lignes de modèle de grille et d'autres attributs.

7. table : L'élément est affiché sous forme de tableau, similaire à l'élément table en HTML. L'élément sera analysé dans un objet tableau, qui peut contenir des sous-éléments tels que l'en-tête du tableau (thead), le corps du tableau (tbody) et le pied de page du tableau (tfoot).

8. inline-table : L'élément est affiché sous forme de tableau en ligne, affiché sur la même ligne que les éléments adjacents. Similaire à l'attribut table, mais affiché en tant qu'élément en ligne.

9. élément de liste : l'élément est affiché sous forme d'élément de liste, similaire à l'élément li en HTML. S'applique aux sous-éléments des listes non ordonnées (ul) et des listes ordonnées (ol).

10.hériter : hériter de la valeur de l'attribut d'affichage de l'élément parent. S'il n'y a pas d'élément parent, il est considéré comme un bloc.

Voici quelques valeurs d'attribut courantes de l'attribut d'affichage en CSS. En définissant différentes valeurs d'attribut d'affichage, vous pouvez contrôler de manière flexible la façon dont les éléments sont affichés sur la page et obtenir divers effets de mise en page.

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!