Qu'est-ce que l'affichage frontal

L'affichage frontal est une propriété CSS utilisée pour contrôler la façon dont les éléments sont affichés. L'attribut display peut définir le type d'affichage de l'élément et déterminer la manière dont l'élément est disposé et présenté sur la page. Les valeurs courantes pour l'attribut d'affichage incluent block, inline, inline-block, none, flex, grid, etc. En définissant l'attribut d'affichage, vous pouvez contrôler de manière flexible le mode d'affichage des éléments, ce qui peut améliorer la lisibilité, la maintenabilité et l'évolutivité de la page et offrir aux utilisateurs une meilleure expérience utilisateur.

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

Dans le développement front-end, l'affichage est une propriété CSS utilisée pour contrôler la façon dont les éléments sont affichés. L'attribut display peut définir le type d'affichage de l'élément et déterminer la manière dont l'élément est disposé et présenté sur la page.

Les valeurs communes​​de l'attribut display sont les suivantes :

1. block :

- Élément de niveau bloc : Les éléments dont l'attribut display est défini sur block sont appelés éléments de niveau bloc. Les éléments au niveau du bloc occuperont eux-mêmes une ligne distincte et un espace. Vous pouvez définir des propriétés telles que la largeur, la hauteur, les marges et le remplissage. Les éléments courants au niveau du bloc incluent div, p, h1-h6, etc.

2. inline :

- Élément en ligne : les éléments dont l'attribut display est défini sur inline sont appelés éléments en ligne. Les éléments en ligne n'occuperont pas de ligne propre, mais occuperont uniquement l'espace de leur propre contenu. Ils ne peuvent pas définir de propriétés telles que la largeur, la hauteur, les marges et le remplissage. Les éléments en ligne courants incluent span, a, strong, em, etc.

3. inline-block :

- Élément Inline-block : les éléments dont l'attribut d'affichage est défini sur inline-block sont appelés éléments de niveau bloc en ligne. Les éléments de niveau bloc en ligne ont les propriétés des éléments en ligne et de niveau bloc. Les éléments de niveau bloc en ligne peuvent définir des propriétés telles que la largeur, la hauteur, les marges et le remplissage, et ils n'occuperont pas une seule ligne. Les éléments courants au niveau du bloc en ligne incluent img, input, etc.

4. aucun :

- Élément masqué : Les éléments dont l'attribut d'affichage est défini sur aucun seront masqués, ne seront pas affichés sur la page et n'occuperont aucun espace. Les éléments masqués ne sont ni rendus ni disposés et ne peuvent pas interagir avec d'autres éléments. En définissant l'attribut display sur none, vous pouvez masquer temporairement un élément sans avoir à le supprimer du DOM.

5. flex :

- Flexbox : Les éléments dont l'attribut d'affichage est défini sur flex deviendront un conteneur flexible et utiliseront le modèle de disposition de boîte flexible. Les boîtes flexibles peuvent contrôler la disposition et l'alignement des sous-éléments en définissant les propriétés du conteneur flexible, rendant la mise en page plus flexible et plus réactive.

6. grille :

- Disposition en grille (Grid) : Les éléments dont l'attribut d'affichage est défini sur grille deviendront un conteneur de grille et utiliseront le modèle de disposition en grille. La disposition en grille peut contrôler la disposition et l'alignement des sous-éléments en définissant les propriétés du conteneur de grille pour obtenir une disposition de grille complexe.

En plus des valeurs communes ci-dessus, l'attribut display a également d'autres valeurs, telles que table, table-cell, table-row, etc., qui sont utilisées pour contrôler la disposition du tableau des éléments.

En définissant l'attribut d'affichage, nous pouvons contrôler de manière flexible le mode d'affichage des éléments et obtenir différents effets de mise en page et expériences interactives. Dans le développement front-end, une utilisation raisonnable de l'attribut d'affichage peut améliorer la lisibilité, la maintenabilité et l'évolutivité de la page, et offrir aux utilisateurs une meilleure expérience utilisateur.

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!