Comment utiliser l'affichage en CSS

L'attribut display est utilisé pour spécifier le comportement de mise en page de l'élément. Vous avez le choix entre plusieurs valeurs, notamment block, inline, inline-block, none, flex et grid. À l'aide de la propriété display, vous pouvez définir l'affichage d'un élément en tant qu'élément de bloc, élément en ligne ou autre formatage en spécifiant une valeur dans une feuille de style CSS. Par exemple, display: block; affiche l'élément en tant qu'élément de niveau bloc.

Utilisation de display en CSS

Quel est l'attribut display ? L'attribut

display est utilisé pour définir le comportement de mise en page d'un élément sur la page. Il spécifie comment l'élément est affiché en tant qu'élément de bloc, élément en ligne ou autre format. Valeurs de

display La propriété

display accepte les valeurs suivantes :

• block - L'élément est affiché comme un élément de niveau bloc, occupant toute la largeur disponible et commençant sur une nouvelle ligne.
• inline - L'élément est affiché comme un élément en ligne et ne s'enroule pas lorsqu'il est sur la même ligne que d'autres éléments.
• inline-block - Combine les fonctionnalités de block et inline, permettant à un élément de prendre de la largeur tout en s'affichant avec d'autres éléments dans la même ligne.
• none - L'élément n'est pas affiché sur la page.
• flex - Transforme un élément en conteneur pour la disposition flexbox.
• grid - Transforme un élément en conteneur pour une disposition en grille.

Comment utiliser l'attribut display ?

Utilisez l'attribut display dans une feuille de style CSS avec la syntaxe suivante :

<code class="css">selector {
  display: value;
}</code>

Par exemple :

<code class="css">p {
  display: block;
}</code>

Cela entraînera l'affichage de tous les éléments de paragraphe en tant qu'éléments de niveau bloc.

Exemple d'utilisation de l'attribut d'affichage

• Afficher un élément de titre en tant qu'élément de niveau bloc :

  <code class="css">h1 {
  display: block;
  }</code>

  Copier après la connexion

• Afficher un lien hypertexte en tant qu'élément en ligne :

  <code class="css">a {
  display: inline;
  }</code>

  Copier après la connexion

• Créer des éléments qui remplissent à la fois la largeur et la ligne avec d'autres éléments Bouton :

  <code class="css">button {
  display: inline-block;
  }</code>

  Copier après la connexion

• Masquer l'élément sur la page :

  <code class="css">#my-element {
  display: none;
  }</code>

  Copier après la connexion

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!