Explication détaillée de l'utilisation de display en CSS

CSS est un élément essentiel de la conception Web et l'attribut d'affichage est l'un des attributs les plus importants. La fonction principale de l'attribut display est de contrôler le mode d'affichage des éléments de la page Web, notamment les méthodes block, inline, inline-block, flex, grid et autres. Dans cet article, nous présenterons l'utilisation de l'attribut display.

1. block

block est la valeur par défaut de l'attribut d'affichage. Lorsqu'un élément est défini sur bloc, il sera affiché comme un élément de niveau bloc sur la page, qui occupera une ligne entière et s'enroulera automatiquement. Les éléments courants au niveau du bloc incluent p, h1~h6, div, etc. Les éléments au niveau du bloc peuvent définir des attributs tels que la largeur, la hauteur, les marges et le remplissage, ou masquer l'élément via display:none.

Exemple de code :

<div>我是一个块级元素</div>

2. inline

inline est un autre attribut d'affichage courant. Lorsqu'un élément est défini sur en ligne, il apparaîtra sur la page en tant qu'élément en ligne, il ne sera pas renvoyé à la ligne et tiendra sur une seule ligne. Les éléments en ligne courants incluent a, span, img, etc. La largeur et la hauteur d'un élément en ligne dépendent du contenu de l'élément. Les marges et le remplissage ne peuvent pas être définis et l'élément ne peut pas être masqué via display:none.

Exemple de code :

<a href="#">我是一个内联元素</a>

3. inline-block

inline-block est une combinaison de block et inline Lorsqu'un élément est défini sur inline-block, il sera affiché comme un élément de niveau bloc en ligne sur la page. . Il n'occupera pas une ligne entière, mais il peut avoir une largeur, une hauteur, des marges et un remplissage, et peut être défini sur display:none.

Exemple de code :

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

flex est un attribut nouvellement ajouté dans CSS3, qui peut rendre la disposition des éléments plus flexible. Lorsqu'un élément est défini sur flex, il devient un conteneur et les sous-éléments à l'intérieur peuvent ajuster de manière flexible la largeur, la hauteur et la disposition en définissant l'attribut flex. Vous devez définir display:flex pour activer l'attribut flex. Vous pouvez définir flex-direction, justifier-content, align-items, align-content et d'autres attributs pour contrôler la disposition des éléments enfants.

Exemple de code :

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid est un autre attribut nouvellement ajouté dans CSS3, qui peut être utilisé pour créer une disposition en grille. Semblable à flex, vous devez définir display:grid pour activer l'attribut de grille. Vous pouvez contrôler la disposition de la grille via des attributs tels que les lignes de modèle de grille, les colonnes de modèle de grille et les zones de modèle de grille.

Exemple de code :

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

Ce qui précède concerne l'utilisation de l'attribut d'affichage. Vous pouvez choisir l'attribut approprié en fonction de vos besoins pour contrôler la disposition des éléments et obtenir l'effet de conception Web.

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!