Comment convertir entre des éléments CSS au niveau de la ligne et des éléments au niveau du bloc

En CSS, vous pouvez utiliser l'attribut display pour convertir les éléments au niveau de la ligne et les éléments au niveau du bloc. Définissez le style "display:block;" sur les éléments au niveau de la ligne pour les convertir en éléments au niveau du bloc. Définissez le style « display:inline ; » pour convertir en éléments au niveau de la ligne.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Éléments en ligne

span, i, a, img, etc. Lorsqu'ils sont affichés dans une ligne, les éléments dont la largeur et la hauteur ne peuvent pas être définies sont généralement des éléments en ligne.

Éléments de niveau bloc

div, h1, p, li, etc. Un élément qui occupe sa propre ligne et peut définir la largeur et la hauteur est un élément de niveau bloc.

Convertir les éléments de niveau bloc en éléments en ligne

Définissez display：inline; dans les éléments de niveau bloc pour convertir les éléments de niveau bloc en éléments en ligne.

Convertir les éléments en ligne en éléments de niveau bloc

Définissez display:block; dans les éléments en ligne pour convertir les éléments en ligne en éléments de niveau bloc.

Convertir des éléments de niveau bloc ou des éléments en ligne en

Définir display：inline-block; dans des éléments de niveau bloc ou des éléments en ligne pour convertir des éléments de niveau bloc ou des éléments en ligne en éléments en ligne bloque les éléments de niveau et peut être affiché sur la même ligne. [Tutoriel recommandé : Tutoriel vidéo CSS ]

Attribut d'affichage CSS

L'attribut d'affichage spécifie le type de boîte que l'élément doit générer.

• block Cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après cet élément.

• en ligne par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément.

• inline-block Élément de bloc en ligne. (Nouvelle valeur ajoutée dans CSS2.1)

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

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!