Une introduction à la différence entre les éléments en ligne et les éléments de niveau bloc en CSS

Cet article présente principalement la différence entre les éléments en ligne et les éléments de niveau bloc, qui ont une bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

1 Les différences entre les éléments en ligne. éléments et éléments au niveau du bloc Différences

1. Les éléments en ligne n'occuperont pas toute la ligne, mais seront disposés en ligne droite, tous sur la même ligne, disposés horizontalement

Les éléments au niveau du bloc occuperont une ligne, disposés verticalement.

　2. Les éléments de niveau bloc peuvent contenir des éléments en ligne et les éléments de niveau bloc ; les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc.

3. La différence entre les attributs des éléments en ligne et des éléments au niveau du bloc est principalement due aux attributs du modèle de boîte. Les éléments en ligne sont définis pour avoir une largeur invalide, une hauteur invalide (la hauteur de ligne peut être définie), marge haut et bas invalide, et remplissage haut et bas invalide.

2. Conversion entre les éléments en ligne et les éléments de niveau bloc

Les éléments en ligne sont convertis en éléments de bloc : display:block;

Les éléments de bloc sont converti en éléments en ligne : display:inline;

3. Extension du problème

Description du problème : Pourquoi la largeur et la hauteur des éléments en ligne tels que img et input peuvent-elles être définies ?

Réponse détaillée :

L'élément est la base de la structure du document. En CSS, chaque élément génère une boîte (box, également traduite par "box") qui contient le contenu de l'élément. Mais différents éléments seront affichés différemment. Par exemple, e388a4556c0f65e1904146cc1a846bee et 45a2772a6b6107b401db3c9b82c049c2

sont différents, et 8e99a69fbe029cd4e2b854e244eab143 Différents types sont spécifiés pour différents éléments dans la définition du type de document (DTD), ce qui est l'une des raisons pour lesquelles la DTD est importante pour les documents.

　

1. Éléments remplaçables et non remplaçables

À partir des caractéristiques de l'élément lui-même, il peut être divisé en éléments remplaçables et non remplaçables. éléments.

　

a) Élément de remplacement

　 L'élément de remplacement signifie que le navigateur détermine le contenu d'affichage spécifique de l'élément en fonction de sa balise et de ses attributs.

Par exemple, le navigateur lira les informations sur l'image et les affichera en fonction de la valeur de l'attribut src de la balise a1f02c36ba31691bcfe87b2722de723b, mais si vous affichez le code HTML (X), vous ne pouvez pas voir le contenu réel de l'image ; autre exemple Selon l'attribut type de la balise d5fd7aea971a85678ba271703566ebfd,

décide d'afficher ou non une zone de saisie, un bouton radio, etc.

　(X)a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e, 273238ce9338fbb04bee6997e5552b95 dans (X)HTML sont tous des éléments de remplacement. Ces éléments n'ont souvent pas de contenu réel, c'est-à-dire qu'ils sont vides, par exemple :

<img src=”cat.jpg” />
　　<input type="submit" name="Submit" value="提交" />

Le navigateur les affichera en fonction du type de balise. et les attributs de l'élément. Les éléments remplaçables génèrent également des cases dans leur affichage.

 

b) Éléments non remplaçables

(X) La plupart des éléments HTML sont des éléments non remplaçables, c'est-à-dire que leur contenu est directement affiché à l’utilisateur (par exemple, navigateur). Par exemple :

<p>段落的内容</p>

Le paragraphe e388a4556c0f65e1904146cc1a846bee est un élément non remplaçable, et le texte "contenu du paragraphe" est entièrement affiché.

　

2. Afficher les éléments

En plus de la classification des éléments remplaçables et des éléments non remplaçables, il existe d'autres classifications d'éléments en CSS 2.1 Méthode : éléments de niveau bloc (block-level) et éléments en ligne (inline-level, également traduits par éléments "inline").

　

a) Éléments au niveau du bloc

La caractéristique la plus évidente d'un élément visuellement formaté sous forme de bloc est qu'il se remplit horizontalement par par défaut La zone de contenu de son élément parent, et il n'y a aucun autre élément sur les côtés gauche et droit de celui-ci, c'est-à-dire que l'élément de niveau bloc est sur sa propre ligne par défaut.

Les éléments typiques au niveau du bloc sont : e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1 à 4e9ee319e0fa4abc21ff286eeb145ecc, etc.

Les éléments qui flottent (attribut float, peuvent flotter à gauche ou à droite) via CSS et définissent l'attribut d'affichage sur "block" ou "list-item" sont des éléments de niveau bloc.

Mais les éléments flottants sont spéciaux. En raison du flottement, il peut y avoir d'autres éléments à côté d'eux. Et "élément de liste" (élément de liste 25edfb22a4f469ecb59f1190150159c6) générera un symbole de point ou une séquence numérique devant lui.

 

b) Éléments en ligne

Les éléments en ligne ne forment pas un nouveau bloc de contenu, c'est-à-dire qu'il peut y avoir d'autres éléments autour d'eux, tels que car 3499910bf9dac5ae3c52d5ede7383485 , 45a2772a6b6107b401db3c9b82c049c2, 8e99a69fbe029cd4e2b854e244eab143, etc. sont tous des éléments typiques de niveau en ligne.

Les éléments dont l'attribut display est égal à "inline" sont des éléments en ligne. Presque tous les éléments remplaçables sont des éléments en ligne, tels que a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, etc.

Cependant, le type d'éléments n'est pas fixe. En définissant l'attribut display de CSS, les éléments en ligne peuvent être modifiés en éléments de niveau bloc, et les éléments de niveau bloc peuvent également être modifiés en éléments en ligne.

3. Conclusion :

Les éléments de remplacement ont généralement des dimensions intrinsèques, ils ont donc une largeur et une hauteur paramétrables. Par exemple, si vous ne précisez pas la largeur et la hauteur de l'image, elle sera affichée en fonction de sa taille intrinsèque, qui est la largeur et la hauteur de l'image lors de son enregistrement.

Pour les éléments de formulaire, les navigateurs ont également des styles par défaut, notamment la largeur et la hauteur.

Pour plus d'informations sur les différences entre les éléments en ligne et les éléments de niveau bloc en CSS, veuillez faire attention au site Web PHP chinois !