Présentation et différences entre les éléments HTML en ligne et les éléments HTML au niveau des blocs_HTML/Xhtml_Production de pages Web

Caractéristiques des éléments (blocs) au niveau du bloc  :
•Occupez toujours une ligne, ce qui signifie commencer sur une nouvelle ligne, et les éléments suivants doivent également être affichés sur une autre ligne
•Largeur (largeur ; ), la hauteur, le remplissage et la marge peuvent tous être contrôlés ;

Propriétés de l'élément en ligne (en ligne)  :
• et les éléments en ligne adjacents sont sur la même ligne
• Largeur ; , la hauteur, le haut/le bas du remplissage (padding-top/padding-bottom) et le haut/bas de la marge (margin-top/margin -bottom) ne peuvent pas être modifiés, c'est-à-dire la taille du texte ou des images à l'intérieur

Les principaux éléments au niveau du bloc sont  :

Copier le codeLe code est comme suit :

adresse, blockquote, centre, dir, div, dl, champset, formulaire, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

Les principaux éléments en ligne sont  :

Copier le code Le code est le suivant :

a , abbr , acronyme , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var

Éléments mutables (le fait que l'élément soit un bloc ou un élément en ligne est déterminé en fonction du contexte)  :

Copier le codeLe code est le suivant :

applet, bouton, del, iframe, ins, map, object, script

Application CSS de niveau bloc moyen , éléments en ligne  : En utilisant CSS, nous pouvons nous débarrasser des restrictions de classification des balises HTML dans le tableau ci-dessus et appliquer librement les attributs dont nous avons besoin sur différentes balises/éléments.


Les principaux styles CSS utilisés sont les trois suivants  : •display:block - affiché sous forme d'éléments de niveau bloc
•display:inline - affiché sous forme d'éléments en ligne
•dipslay:inline-block -- Affiché comme un élément de bloc en ligne, affiché en parallèle et peut modifier des propriétés telles que la largeur, la hauteur, les marges intérieures et extérieures
Nous ajoutons souvent display:inline-block au

Style d'élément, la liste initialement verticale peut être affichée horizontalement.


Hors sujet : J'ai récemment compilé des connaissances pertinentes sur la différence entre les éléments de niveau bloc et les éléments en ligne. J'ai trouvé de nombreux articles connexes sur Internet et j'ai constaté que tout le monde semblait comprendre. avoir tort. Moi-même Après l'avoir testé moi-même, J'ai trouvé beaucoup de problèmes : 1 Les éléments margin-left / margin-right et padding-left / padding-right peuvent être. contrôlé, vous pouvez donc passer. Ces 4 propriétés contrôlent la largeur des éléments en ligne.
2. Les balises d'élément au niveau du bloc peuvent également être placées à l'intérieur des éléments en ligne, et les balises d'élément au niveau du bloc internes développeront les balises en ligne externes, afin que vous puissiez contrôler la hauteur des éléments en ligne en plaçant des éléments de bloc (introduction en ligne). la seule chose est que les éléments en ligne ne peuvent contenir que du texte et d'autres éléments en ligne)
Par exemple :



Copier le code Codez comme suit :


Test