Maison > interface Web > tutoriel HTML > 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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-05-16 16:40:26
original
1750 Les gens l'ont consulté
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 :
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers numéros
内联元素
Depuis 1970-01-01 08:00:00
0
0
0
不使用锚元素创建内联链接:分步指南
Depuis 1970-01-01 08:00:00
0
0
0
将 DIV 元素放置在 SVG 视口内
Depuis 1970-01-01 08:00:00
0
0
0
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal