Mode d'affichage des balises en ligne dans les balises HTML au niveau du bloc

Que savez-vous du mode d'affichage des balises en HTML ? Il est grossièrement divisé en balises de niveau bloc et balises en ligne. Lorsque les débutants utilisent pour la première fois les balises, ils constateront que certains attributs ne fonctionnent pas sur certaines balises, comme la largeur, la hauteur, le centrage horizontal, etc. En fait, l'utilisation de cet attribut ne fonctionne que sur les balises au niveau du bloc. Cet article vous donnera donc une introduction détaillée au mode d'affichage des balises HTML au niveau des blocs et des balises en ligne.

Par exemple, il y aura une situation où le centrage horizontal de la balise p a un effet, mais l'ajout d'un attribut de centrage horizontal à la police n'a aucun effet (comme suit) :

p{ color:red; text-align:center;}
<
BR
>
font{color:red; text-align:center;}

<p>我是块级标签p</p><BR><font>我是行内标签font</font>

Après avoir exécuté l'aperçu, p Le texte peut être centré horizontalement, mais la police ne peut pas (comme suit) :

Ensuite, le problème ci-dessus est lié au mode d'affichage en html :

Les caractéristiques des modes d'affichage :

sont principalement réparties en deux catégories :

Éléments de niveau bloc : occupe une ligne et prend effet sur les valeurs des attributs de largeur et de hauteur Si aucune largeur n'est donnée < ; 🎜>, les éléments au niveau du bloc seront par défaut ceux du navigateur. La largeur de est de 100 % de la largeur

éléments en ligne. : peut avoir plusieurs étiquettes sur une seule ligne, car les valeurs des attributs width et height ne prennent pas effet, et la largeur et la hauteur dépendent entièrement du contenu !

Il existe également un mode d'affichage qui combine les fonctionnalités des deux modes :

Éléments de bloc en ligne : Fonctionnalités combinées en ligne et au niveau du bloc, Il peut non seulement prendre effet sur les valeurs des attributs de largeur et de hauteur, mais également afficher plusieurs étiquettes sur une seule ligne. Le mode d'affichage

en HTML est divisé en niveau bloc et en ligne, parmi lesquels le bloc

couramment utilisé. Les niveaux sont : p ,p,h1~h6,ul,li,dl,dt,dd... Couramment utilisés en ligne incluent : span, font, b, u, i, strong, em , a, img, input, Parmi eux, img et input sont des éléments de bloc en ligne.

Ensuite, certains étudiants se demanderont : ne puis-je pas contrôler la largeur et la hauteur de l'envergure ou de la police ? Oui, laissons de côté le flottement et le positionnement cette fois, et convertissons-les les uns aux autres via l'attribut d'affichage :

1. Convertissez les balises de niveau bloc en balises en ligne : display:inline;

. 2. Convertissez les balises en ligne en balises de niveau bloc : display:block;

3. Convertissez en balises de bloc en ligne : display: inline-block;

Utilisez simplement cet affichage pour les balises correspondantes. L'attribut, en prenant la valeur correspondante, peut convertir les modes d'affichage les uns dans les autres.

J'ai déjà dit si l'attribut text-align est efficace. La raison est que si la balise au niveau du bloc

ne donne pas de largeur , l'élément au niveau du bloc le donnera. par défaut, la largeur du navigateur est de 100 % de largeur , puis le centrage prend effet à 100 % de largeur mais la largeur de l'élément en ligne est complètement étendue par le contenu, donc la largeur est la même ; largeur du contenu. Faisons un test de fond et voyons :

Donc le niveau du bloc est centré au milieu de la boîte, mais parce que le la largeur de l'élément en ligne est la largeur du contenu, il n'y a pas d'espace pour le centrage, donc text-align:center; n'a aucun effet mais ce sera différent si la police est convertie au niveau bloc :

Code XML/HTML Copier le contenu dans le presse-papiers

1. p{ background:green color:red; ; text-align:center;}

2. font{background:green;color:red; text-align:center;display:block;} 

De même, s'il s'agit d'un niveau bloc. Après la conversion en ligne, le texte ne peut pas être affiché au centre.

Parce qu'en HTML, les éléments en ligne sont considérés comme des balises avec des propriétés de texte. Le niveau de bloc peut centrer le texte horizontalement. Ensuite, les balises en ligne au niveau du bloc sont considérées comme des propriétés de texte. . -align:center;, les balises en ligne à l'intérieur seront centrées horizontalement dans les balises au niveau du bloc comme le texte :

Sans text-align:center;:

Code XML/HTMLCopier le contenu dans le presse-papiers

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <p>
       <font>我是行内标签font</font> <font>我是行内标签font</font>
   </p>

Ajouter text-align :center;after

1. p{ padding:5px;background:green; color:red;text-align:center;}    
   font{ background:yellow;}

   

   这次主要是讲一下html中显示模式的特性，如果本文对您有帮助，记得推荐一下哦！

   相关推荐：
   

   css的显示模式display记录笔记

   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!