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

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

王林
王林avant
2020-05-07 09:15:284987parcourir

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

Éléments au niveau du bloc

1. Commencez toujours sur une nouvelle ligne

2. Hauteur, hauteur de ligne, marge et Les marges intérieures peuvent être contrôlées

3. La largeur par défaut est de 100 % du navigateur

4. Peut accueillir des éléments en ligne et d'autres éléments de bloc

Éléments en ligne

1. Sur la même ligne que les éléments adjacents

2. La hauteur et la largeur ne sont pas valides, mais le remplissage et la marge dans le sens horizontal peuvent être définis, et la direction verticale n'est pas valide

3. La largeur par défaut est la largeur de son propre contenu

4. Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne (sauf a)

(Recommandation du didacticiel vidéo : Tutoriel vidéo CSS )

Remarque :

1. Seul le texte peut former un paragraphe, donc au niveau du bloc les éléments ne peuvent pas être placés dans p. De même, il y a ces balises h1 -h6, dt, etc., ce sont des balises au niveau du bloc de texte, et d'autres éléments au niveau du bloc ne peuvent pas être placés à l'intérieur de

2. Les liens ne peuvent pas être placés dans p. être placé à l'intérieur des liens

éléments de niveau bloc Différences par rapport aux éléments en ligne

Caractéristiques des éléments de niveau bloc :

1. Commencez toujours sur une nouvelle ligne

2. La hauteur, la hauteur de la ligne, les marges et le remplissage peuvent tous être contrôlés

3 La largeur par défaut est de 100 % du navigateur

.

4. Les éléments en ligne et autres éléments de bloc peuvent être hébergés

Caractéristiques des éléments en ligne :

1. Sur la même ligne que les éléments en ligne adjacents

2. La hauteur et la largeur ne sont pas valides, mais le remplissage horizontal et la marge peuvent être définis. La direction verticale n'est pas valide

3. La largeur par défaut est la largeur de son propre contenu

4. . Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne (sauf a)

Balises de bloc en ligne inline-block

Il existe plusieurs balises spéciales en ligne. elements-, , , vous pouvez les contrôler. Définissez les propriétés de largeur, de hauteur et d'alignement. Certaines sources peuvent les appeler des éléments de bloc en ligne.

Caractéristiques :

1. Sur la même ligne que les éléments en ligne adjacents (à l'intérieur de la ligne), mais il y aura un espace vide entre eux

2, la largeur par défaut est la largeur de son propre contenu

3. La hauteur, la hauteur de ligne, les marges extérieures et les marges intérieures peuvent toutes être contrôlées

Affichage des étiquettes affichage de conversion de mode

Convertir le bloc en inline : display:inline;

Convertir le bloc en ligne en bloc : display:block;

Convertir le bloc et les éléments en ligne en bloc en ligne : display:inline-block;

Tutoriel recommandé : démarrage rapide CSS


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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer