Maison > interface Web > tutoriel CSS > Comment l'attribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

Comment l'attribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

不言
Libérer: 2018-11-05 18:01:38
original
5664 Les gens l'ont consulté

Nous savons qu'il existe deux types d'éléments en HTML : les éléments de niveau bloc et les éléments en ligne. L'attribut display peut réaliser la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne en HTML. Sans plus tarder, passons directement au texte.

Par défaut, la valeur d'affichage par défaut du paragraphe

(élément de niveau bloc) est bloc, mais peut être rendue sous forme de valeur en ligne :

p{ display: inline;}
Copier après la connexion

Pourquoi ne pas utiliser Qu'en est-il d'un élément HTML en ligne, tel que ?

Parce que vous choisissez l'élément HTML pour sa signification, pas pour son rendu. Si nous décidons qu'un paragraphe convient le mieux à notre contenu, nous ne pouvons pas modifier les balises uniquement à des fins de style. CSS implémente les styles.

En bref, l'affichage permet de changer le type d'un élément sans en changer la signification.

Chaque option d'affichage a un comportement de rendu spécifique :

le bloc occupera toute la largeur

l'inline sera traité comme du texte brut

inline-block comme c'est Comme son nom l'indique, c'est un composite de comportement de bloc et de comportement en ligne, l'option "le meilleur des deux mondes"

l'élément de liste est similaire à un bloc occupant toute la largeur disponible, mais affichant des puces supplémentaires

table, table-row et table-cell ont tous un comportement très spécifique, bien qu'inattendu, ce qui rend les mises en page plus intéressantes

affichage : bloc

Cela convertira n’importe quel élément en élément de bloc.

Cette technique est souvent utilisée pour les liens afin d'augmenter leur zone cliquable et peut être facilement évaluée en définissant la couleur d'arrière-plan.

.menu a{ background: red; color: white;}
Copier après la connexion
<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>
Copier après la connexion

L'effet est le suivant :

Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

Si on convertit ces liens en blocs, on augmentera leur zone cible :

.menu a{ background: red; color: white; display: block;}
Copier après la connexion

L'effet est le suivant :

Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

affichage : en ligne

Cela convertira n'importe quel élément en un élément en ligne, comme s'il s'agissait simplement de texte brut.

Il est souvent utilisé pour créer une navigation horizontale où les éléments de liste sont sémantiquement mais pas visuellement utiles.

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
Copier après la connexion

L'effet est le suivant :

Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

.menu li{ display: inline;}
Copier après la connexion

L'effet est le suivant :

Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

display: list-item

Le seul élément HTML list-item affiché est (sans surprise) l'élément de liste

  • , et la définition description

    Afficher les éléments de la liste en utilisant des puces (si dans une liste non ordonnée

      ) ou en utilisant des nombres incrémentiels (si dans une liste ordonnée
        ).

        Étant donné que le rendu de ces puces et chiffres varie selon les navigateurs et qu'il est difficile à styliser en CSS, display: list-item n'utilise jamais cette règle. En fait,

      1. est généralement rendu sous la forme display: block ou display: inline car ils sont plus flexibles.

        display: none

        L'application de l'élément display: none; HTML le supprimera de votre page Web, comme s'il n'avait jamais existé dans votre code.

        <p>php中文网</p>
        <p class="class">PHP中文网</p>
        <p>Php中文网</p>
        Copier après la connexion
        .class{ display: none;}
        Copier après la connexion

        L'effet est le suivant :

        Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

        Il y a 3 paragraphes dans le code, mais seulement 2 apparaissent, comme si le 2ème Le paragraphe n'a jamais existé.

        visibilité : cachée

        Visibilité et affichage des propriétés CSS. Un peu similaire. L'application masquera l'élément sur la page avec visible : caché ; mais elle le rendra seulement invisible : il occupera toujours l'espace qu'il devrait.

        <p>哈哈哈哈</p>
        <p class="class">哈哈哈哈哈哈</p>
        <p class="class">哈哈哈哈哈哈哈哈</p>
        <p>哈哈哈哈哈哈哈哈啦</p>
        Copier après la connexion
        .class{ visibility: hidden;}
        Copier après la connexion

        L'effet est le suivant :

        Comment lattribut display de CSS réalise-t-il la conversion mutuelle entre les éléments de niveau bloc et les éléments en ligne ?

        Il y a 5 paragraphes dans le code, seulement 2 apparaissent, mais l'espace que le Le paragraphe masqué devrait occuper est toujours Ils existent, mais vous ne pouvez pas les voir.

        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:
    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