css : élément de bloc, élément en ligne, élément de bloc en ligne et conversion entre les trois éléments

1. Introduction des trois éléments

1. Bloquer les éléments

块元素的特点

  1. Exclusivement sur une seule ligne, c'est-à-dire qu'il sera automatiquement renvoyé
  2. Vous pouvez définir la hauteur, la largeur, la marge extérieure, la marge intérieure
  3. La largeur par défaut est la largeur de l'élément parent
    常见块元素
    <h1></h1>---<h6></h6> <div> <p> <ul> <li> <ol>

2. Éléments en ligne

行内元素的特点

  1. pas de retour à la ligne
  2. Le réglage de la largeur et de la hauteur n'est pas valide
  3. La définition de la marge est valide pour la gauche et la droite, mais non valide pour le haut et le bas ; le remplissage n'est pas valide.
  4. La hauteur par défaut est la hauteur du contenu
    常见行内元素
    <span> <a> <i> <em> <strong>

3. Éléments de bloc en ligne

行内元素的特点

  1. pas de retour à la ligne
  2. La hauteur par défaut est la hauteur du contenu
  3. Vous pouvez définir la largeur, la hauteur, la marge extérieure, la marge intérieure
    常见行内块元素
    <img> <td> <input>

Deuxièmement, la conversion entre les trois éléments

dispaly:block;转换为块元素
dispaly:inline;转换为行内元素
dispaly:inline-block;转换为行内块元素

Je suppose que tu aimes

Origine blog.csdn.net/qq_50487248/article/details/127183373
conseillé
Classement