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

Les éléments de bloc en ligne ont les caractéristiques à la fois des éléments en ligne et des éléments de bloc

Alors, comment définir un élément sur un élément de bloc en ligne

display:inline-block;

Remarque : (nouveau dans CSS2.1), les balises <img>, <input> sont de telles balises de bloc en ligne.

Caractéristiques des éléments de bloc en ligne

1, et les autres éléments sont sur la même ligne

2 ; , la hauteur, la largeur, la hauteur de ligne et les marges supérieure et inférieure de l'élément peuvent toutes être définies.

Écrivons un exemple ci-dessous pour définir la largeur, la hauteur, la couleur d'arrière-plan, etc. pour une balise a. La balise a est un élément en ligne par défaut, et la largeur et la hauteur n'ont aucun effet.

Le code est le suivant :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		display:inline-block;	/*内联块状元素*/	
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<a href="#">欢迎大家来到php中文网</a>
</body>
</html>

Comme indiqué dans le code ci-dessus, après avoir converti la balise a en un élément de bloc en ligne, nous pouvons définir la largeur et la hauteur

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ display:inline-block; /*内联块状元素*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <a href="#">欢迎大家来到php中文网</a> </body> </html>

soumettre Réinitialiser le code

Opération automatique

HTML+CSS Facile à démarrer avec les éléments de bloc 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]