recherche

Maison  >  Article  >  interface Web  >  Quelle est la différence et la connexion entre les éléments en ligne et les éléments de niveau bloc en HTML

Quelle est la différence et la connexion entre les éléments en ligne et les éléments de niveau bloc en HTML

青灯夜游
青灯夜游original
2022-01-21 16:43:454157parcourir

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".

Quelle est la différence et la connexion entre les éléments en ligne et les éléments de niveau bloc en HTML

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 parent

Les é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 Vous pouvez définir les attributs de largeur et de hauteur . Vous pouvez définir les attributs margin et padding corresponds to display:blockLa connexion entre les éléments en ligne et les éléments de niveau bloc en HTMLExemple 2 :
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>
 
<!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!

    html5 css3 html display margin padding
    Déclaration：
    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
    Article précédent：Où mettre le style html ?Article suivant：Où mettre le style html ?

    Articles Liés

    Voir plus