Quels sont les modes d'affichage des balises HTML de niveau bloc, des balises en ligne et des balises de bloc en ligne ?

Cette fois, je vais vous expliquer quels sont les modes d'affichage des balises html au niveau du bloc, des balises en ligne et des balises de bloc en ligne. Quelles sont les précautions lors de l'utilisation des balises html au niveau du bloc, des balises en ligne, et les modes d'affichage des balises de bloc en ligne ? Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

Dans la conférence d'aujourd'hui, nous avons parlé du mode d'affichage des balises en HTML, qui sont grossièrement divisées en balises de niveau bloc et balises en ligne. Ensuite, lorsque les débutants utiliseront les balises pour la première fois, 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. Personnellement, je pense que c’est quelque chose que les débutants peuvent facilement négliger, alors je l’ai noté !

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;}82c2f54f4cf245029ffb326befd49b3ffont{color:red; text-align:center;}

e388a4556c0f65e1904146cc1a846beeJe suis une balise de niveau bloc p94b3e26ee717c64999d7867364b1b4a382c2f54f4cf245029ffb326befd49b3f 240cb830ca84ebaabbd07850110b414dJe suis une police de balise en lignee6e38b3c62e8df885fe2e3986461aa63

Après avoir exécuté l'aperçu, p peut centrer le texte horizontalement, mais la police ne peut pas

Ensuite le problème ci-dessus est lié à l'affichage en html. Il s'agit du mode :

Les fonctionnalités du mode d'affichage :

sont principalement divisées en deux catégories :

Éléments de niveau bloc : occupe une ligne exclusive et prend effet sur les valeurs des attributs width et height ; if Si aucune largeur n'est donnée, les éléments au niveau du bloc auront par défaut la largeur du navigateur, c'est-à-dire 100 % de largeur

en ligne ; éléments : plusieurs balises peuvent exister sur une seule ligne, et les valeurs des attributs width et height ne prendront pas effet et sont entièrement prises en charge par le contenu.

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

Élément de bloc en ligne : les attributs combinés en ligne et au niveau du bloc peuvent non seulement prendre effet sur les valeurs des attributs de largeur et de hauteur, mais aussi plus Chaque balise est affichée sur une seule ligne ;

le mode d'affichage en HTML est divisé en niveaux de bloc et en ligne. Les niveaux de bloc couramment utilisés sont : p, p, h1~h6, ul, li, dl, dt, dd.. . Les blocs en ligne couramment utilisés incluent : span, font, b, u, i, strong, em, a, img, input, où 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 ? D'accord, alors mettons de côté le float et le positionnement cette fois, et utilisons simplement l'attribut display pour les convertir les uns dans les autres :

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

donnez simplement le correspondant L'étiquette utilise l'attribut display et prend la valeur correspondante pour convertir les modes d'affichage les uns aux 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 aura par défaut la largeur du navigateur, c'est-à-dire que est, 100% de largeur, puis à 100 Le centrage de la largeur de % prend effet ; mais la largeur de l'élément en ligne est complètement étirée par le contenu, donc la largeur est la largeur du contenu. Faisons un test en arrière-plan pour voir. :

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

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

De même, si le niveau bloc est converti en niveau inline, le texte ne peut pas être affiché au centre.

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

sans text-align:center;:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

ajouté après la lecture du texte- align:center;

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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Connaissance de base du HTML, introduction détaillée aux styles définis par les hyperliens

Connaissance de base du HTML .Introduction détaillée aux feuilles de style CSS et aux attributs de style

Comment utiliser l'attribut href de la balise HTMLa pour spécifier des chemins relatifs et des chemins absolus

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!