Différences : 1. Les éléments au niveau du bloc seront affichés sur une ligne exclusive, mais pas les éléments en ligne adjacents. 2. Les éléments au niveau du bloc peuvent définir la largeur et la hauteur, mais les éléments en ligne. ne peut pas. Contact : les éléments de niveau bloc peuvent être convertis en éléments en ligne à l'aide du style "display:inline", et les éléments en ligne peuvent être convertis en éléments de niveau bloc à l'aide du style "display:block".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. La différence entre les éléments en ligne et les éléments de niveau bloc en HTML
Occupe une ligne. Par défaut, sa largeur remplit automatiquement la largeur de son élément parentLes éléments en ligne adjacents seront disposés sur la même ligne. jusqu'à ce qu'une ligne ne puisse pas tenir. La largeur change avec le contenu de l'élément
Les attributs de largeur et de hauteur ne sont pas valides pour les éléments en ligne | |
Seuls margin-left, margin-right, padding-left, padding-right, les autres attributs n'auront pas d'effet de marge. | |
corresponds to display:inline; | |
Les éléments en ligne et les éléments de niveau bloc peut Conversion mutuelle | Les éléments de niveau bloc peuvent être convertis en éléments en ligne à l'aide du style "display:inline" |
Les éléments en ligne peuvent être convertis en éléments de niveau bloc à l'aide du style "display:block" | Exemple 1 :<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div{ background-color: pink; } .box{ display: inline; /* 块级元素转为内联元素 */ } </style> </head> <body> <div>块级元素1</div> <div class="box">块级元素2</div> <div class="box">块级元素3</div> </body> </html> Copier après la connexion |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span{ background-color: pink; } .box{ display: block; /*内联元素 转为块级元素 */ } </style> </head> <body> <span>内联元素1</span> <span class="box">内联元素2</span> <span class="box">内联元素3</span> </body> </html>
Recommandations associées : "
Tutoriel vidéo HTML
"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!