Quelle est la différence et la connexion entre les éléments en ligne et les éléments de niveau bloc en HTML-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-01-21 16:43:45

original

4187 Les gens l'ont consulté

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

Copier après la connexion

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!