Quelles sont les différences entre les éléments en ligne et les éléments de niveau bloc en HTML ?

Cette fois, je vais vous présenter les différences entre les éléments en ligne et les éléments de niveau bloc en HTML. Quelles sont les précautions lors de l'utilisation d'éléments en ligne et d'éléments de niveau bloc en HTML. ? Ce qui suit est un cas pratique, jetons-y un œil. La

balise html est divisée en deux types, les éléments en ligne et les éléments de niveau bloc. Tout d'abord, comprenons les concepts d'éléments en ligne et d'éléments de niveau bloc :

Bloc. -level Element : généralement un conteneur pour d'autres éléments, il peut accueillir des éléments en ligne et d'autres éléments de niveau bloc. Les éléments de niveau bloc excluent les autres éléments situés sur la même ligne qu'eux. Les attributs width (largeur) et height (hauteur) peuvent. être défini. Les éléments au niveau du bloc dans le flux normal seront placés verticalement. Les éléments de bloc courants sont les éléments en ligne "div"

(éléments en ligne) : les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne et sont des descendants d'éléments de niveau bloc. Ils permettent de localiser d'autres éléments en ligne avec eux. Sur la même ligne, la hauteur (hauteur) et la largeur (largeur) ne peuvent pas être définies. Un élément en ligne courant est "a".

Selon le concept d'éléments de niveau bloc, nous pouvons comprendre que les éléments de niveau bloc ont des sauts de ligne avant et après eux, ce qui équivaut à ajouter une balise 0c6dc11e160d3b678d68754cc175188a avant et après l'élément. Nous pouvons considérer les éléments de niveau bloc comme un bloc ou un rectangle, de sorte que les éléments de niveau bloc peuvent définir les attributs de hauteur et de largeur

Exemple :
fichier CSS :

#div1{  
 width:200px;  
 height:200px;  
 background:#666  
 }  
div2{  
 width:200px;  
 height:200px;  
 background:#F00  
 }

Fichier html :

<div id="div1">  
     div1  
块级元素排斥其他元素与其位于同一行  
</div>  
  <div id="div2">  
     div2  
块级元素排斥其他元素与其位于同一行  
</div>

Deux éléments div ne sont pas situés sur la même ligne

D'après le concept d'éléments inline, on peut comprendre qu'il n'y a pas de ligne s'interrompt avant et après les éléments en ligne. Nous pouvons considérer un élément en ligne comme une ligne, il ne peut donc pas définir les attributs de hauteur et de largeur.

Balise d'élément de bloc

adresse - adresse
blockquote - citation de bloc
centre - alignement au centre
dir - liste de répertoires
div - le niveau de bloc couramment utilisé est facile et est également la balise principale de la mise en page CSS
dl - liste de définitions
fieldset - groupe de contrôle de formulaire
formulaire - formulaire interactif
h1 - titre
h2 - sous-titre
h3 - Niveau 3 titre
h4 - Titre de niveau 4
h5 - Titre de niveau 5
h6 - Titre de niveau 6
hr - Ligne de séparation horizontale
isindex - invite de saisie
menu - Liste de menus
noframes - contenu facultatif des frames (ce contenu de bloc est affiché pour les navigateurs qui ne prennent pas en charge les frames)
noscript - contenu de script facultatif (ce contenu est affiché pour les navigateurs qui ne prennent pas en charge les scripts)
ol - formulaire de tri
p - paragraphe
texte pré-formaté
table - tableau
ul - liste non triée

élément en ligne

a - point d'ancrage
abbr - abréviation
acronyme - premier caractère
b - gras (non recommandé)
bdo - remplacement du bidi
big - grande police
br - saut de ligne
cite - Citation
code - code informatique ( requis lors de la citation du code source)
dfn - champ de définition
em - accentuation
police - paramètre de police (non recommandé)
i - italique
img - image
input - zone de saisie
kbd - définir le texte du clavier
étiquette - étiquette du tableau
q - citation courte
s - trait de soulignement
samp - définir un exemple de code informatique
sélectionner - sélection d'éléments
petite - petite police text
span - conteneur en ligne couramment utilisé, définissant des blocs dans le texte
strike - underline
strong - bold highlight
sub - Subscript
sup - superscript
textarea - saisie de texte sur plusieurs lignes box
tt - définir le texte de la machine à écrire
var - définir la variable

Je crois que vous les avez lu Vous maîtrisez la méthode dans le cas, veuillez faire attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture connexe :

Comment utiliser la balise de base

Comment utiliser js en html pour obtenir l'heure du système local

Comment masquer d'autres attributs dans une balise et afficher uniquement des images

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!