Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser l'affichage en CSS

下次还敢
Libérer: 2024-04-26 12:03:16
original
1193 Les gens l'ont consulté

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.

Comment utiliser l'affichage en CSS

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>
Copier après la connexion

Par exemple :

<code class="css">p {
  display: block;
}</code>
Copier après la connexion

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal