1. Introduction des trois éléments
1. Bloquer les éléments
块元素的特点
- Exclusivement sur une seule ligne, c'est-à-dire qu'il sera automatiquement renvoyé
- Vous pouvez définir la hauteur, la largeur, la marge extérieure, la marge intérieure
- 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
行内元素的特点
- pas de retour à la ligne
- Le réglage de la largeur et de la hauteur n'est pas valide
- 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.
- La hauteur par défaut est la hauteur du contenu
常见行内元素
<span> <a> <i> <em> <strong>
3. Éléments de bloc en ligne
行内元素的特点
- pas de retour à la ligne
- La hauteur par défaut est la hauteur du contenu
- 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;转换为行内块元素