HTML+CSS Facile à démarrer avec les éléments en ligne

En HTML, <span>, <a>, <label>, <strong> et <em> Bien sûr, les éléments de bloc peuvent également être définis comme éléments en ligne via le code

display:inline

fonctionnalités des éléments en ligne :

1. Il est sur la même ligne que les autres éléments ;

2. La hauteur, la largeur et les marges supérieure et inférieure de l'élément ne peuvent pas être définies ; . L'élément La largeur de est la largeur du texte ou de l'image qu'il contient et ne peut pas être modifiée.

Écrivons un morceau de code ci-dessous. La largeur et la hauteur peuvent être définies pour les éléments de bloc, mais la largeur et la hauteur ne peuvent pas être définies pour les éléments en ligne

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		width:100px;
		height:50px;
		background-color:green;  /*设置背景色*/
		color:#fff;  /*设置字体颜色*/
	}
</style>
</head>
<body>
   <a href="#">PHP中文网</a>
</body>
</html>

Regardez le code ci-dessus, a est un élément en ligne, lorsque nous définissons la largeur et la hauteur, il n'y a aucun effet, mais le convertir en éléments de bloc aura des effets évidents

Écrivons un exemple ci-dessous pour convertir des éléments de bloc en éléments en ligne

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	div{
		display:inline;  /*转换成内联元素*/

		/*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<div>欢迎大家来到php中文网</div>
</body>
</html>

Ci-dessus Dans le code, la largeur et la hauteur ne peuvent pas être définies une fois l'élément de bloc converti en élément en ligne

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ display:inline; /*转换成内联元素*/ /*转换成内联元素之后，我们设置宽高，背景色，文字颜色*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <div>欢迎大家来到php中文网</div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML+CSS Facile à démarrer avec les éléments en ligne

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]