Quelles sont les propriétés de l'affichage ?

Les attributs d'affichage incluent block, inline, inline-block, none, flex, grid, etc. Introduction détaillée : 1. block, utilisez la valeur de l'attribut block, l'élément sera affiché comme un élément de niveau bloc, l'élément de niveau bloc occupera une ligne exclusive et sera automatiquement enveloppé avant et après 2. inline, utilisez le ; valeur de l'attribut inline, l'élément sera affiché comme un élément en ligne Sous forme d'affichage, les éléments en ligne n'occuperont pas une ligne seule, mais seront affichés sur une ligne avec d'autres éléments en ligne;

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

L'attribut display est un attribut couramment utilisé en CSS, qui permet de contrôler le mode d'affichage des éléments. En utilisant l'attribut display, vous pouvez faire apparaître les éléments sur la page de différentes manières.

En CSS, l'attribut d'affichage a plusieurs valeurs. Ce qui suit présentera plusieurs attributs d'affichage couramment utilisés et leurs valeurs d'attribut.

1. block (élément de niveau bloc) : en utilisant la valeur de l'attribut block, l'élément sera affiché comme un élément de niveau bloc. Les éléments au niveau du bloc occuperont leur propre ligne et seront automatiquement renvoyés avant et après. Les éléments courants au niveau du bloc incluent div, p, h1-h6, etc.

2. inline (élément en ligne) : en utilisant la valeur de l'attribut en ligne, l'élément sera affiché comme un élément en ligne. Les éléments en ligne n'occupent pas une ligne par eux-mêmes, mais apparaissent sur la même ligne que les autres éléments en ligne. Les éléments en ligne courants incluent span, a, em, etc.

3. inline-block (élément de niveau bloc en ligne) : en utilisant la valeur de l'attribut inline-block, l'élément sera affiché comme un élément de niveau bloc en ligne. Les éléments de niveau bloc en ligne n'occupent pas une ligne par eux-mêmes, mais ils peuvent avoir une largeur et une hauteur définies et apparaître sur la même ligne. Les éléments courants au niveau du bloc en ligne incluent l'entrée, le bouton, etc.

4. none (élément masqué) : En utilisant la valeur de l'attribut none, l'élément sera masqué et n'occupera plus l'espace sur la page. Les éléments masqués ne sont pas visibles sur la page et n'affectent pas la disposition des autres éléments. L'affichage et le masquage des éléments peuvent être contrôlés via JavaScript et d'autres méthodes.

5. Flex (mise en page flexible) : En utilisant la valeur de l'attribut flex, l'élément sera disposé sous la forme d'un modèle de boîte flexible. La disposition flexible permet une disposition flexible et vous permet d'ajuster facilement la taille et la position des éléments. Les attributs de mise en page flexibles courants incluent flex-direction, flex-wrap, justifier-content, etc.

6. grille (disposition en grille) : En utilisant la valeur de l'attribut grille, les éléments seront disposés sous forme de grille. La disposition en grille fournit une méthode de mise en page bidimensionnelle qui divise la page en lignes et colonnes et permet de positionner et d'aligner les éléments. Les attributs courants de disposition de grille incluent les lignes de modèle de grille, les colonnes de modèle de grille, l'espace de grille, etc.

En plus des valeurs d'attribut d'affichage couramment utilisées ci-dessus, il existe également d'autres valeurs d'attribut d'affichage, telles que table (élément de tableau), table-cell (élément de cellule de tableau), etc. Vous pouvez choisir la valeur d'attribut appropriée à contrôler selon les besoins spécifiques. Comment l'élément est affiché.

Pour résumer, l'attribut display est un attribut important en CSS qui contrôle le mode d'affichage des éléments. Les valeurs d'attribut d'affichage couramment utilisées incluent block, inline, inline-block, none, flex, grid, etc. En utilisant de manière flexible ces valeurs d'attribut, vous pouvez obtenir divers effets de mise en page et améliorer la lisibilité et l'expérience utilisateur de la 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!