1. La différence entre les éléments en ligne et les éléments de niveau bloc
1. Les éléments en ligne n'occuperont pas toute la ligne et sont disposés en une ligne droite. Ils sont 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 des é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 paramètres de largeur et de hauteur des éléments en ligne ne sont pas valides (hauteur de ligne). peut être défini), et les marges supérieure et inférieure ne sont pas valides, le remplissage vers le haut et vers le bas n'est pas valide.
2. Conversion des éléments en ligne et des éléments de niveau bloc
Conversion des éléments en ligne éléments Pour les éléments de bloc : display:block;
Les éléments de bloc sont convertis en Éléments en ligne: display:inline;
3.
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 :
Les éléments sont la base de la structure du document. En CSS, chaque élément génère une boîte (box, également traduit par « box ») qui contient le contenu de l'élément. Mais différents éléments seront affichés différemment. Par exemple,
et
sont différents, et 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 ses balises 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 , mais si vous affichez le code HTML (X), vous ne pouvez pas voir le contenu réel de l'image ; autre exemple
En fonction de l'attribut type de la balise , décidez si vous souhaitez afficher une zone de saisie, un bouton radio, etc.
Les éléments , ,
Le navigateur affichera ces éléments en fonction de leur type de balise et de leurs attributs. 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 (comme comme navigateur). Par exemple :
Contenu du paragraphe
Le paragraphe
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 une autre méthode de classification des éléments en CSS 2.1 : au niveau bloc éléments (niveau bloc) et éléments en ligne (niveau en ligne, également traduits par éléments "en ligne").
a) Éléments de niveau bloc
La caractéristique la plus évidente d'un élément visuellement formaté en bloc est qu'il remplit la zone de contenu de son élément parent horizontalement par défaut, et sur ses côtés gauche et droit, les éléments de niveau bloc sont sur leur propre ligne par défaut s'il n'y a pas d'autres éléments.
Les éléments typiques au niveau du bloc sont :
,
,
Les éléments qui flottent (attribut float, peuvent flotter vers la gauche ou la 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
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 , , , etc., sont tous des éléments typiques de niveau en ligne.
Les éléments dont l'attribut d'affichage est égal à "inline" sont tous des éléments en ligne. Presque tous les éléments remplaçables sont des éléments en ligne, tels que , , 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 transformés en éléments de niveau bloc, et les éléments de niveau bloc peuvent également être transformé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, qui peuvent être paramétrées. 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'articles connexes sur la différence entre les éléments en ligne et les éléments de niveau bloc, veuillez faire attention au site Web PHP chinois !