Table des matières
Élément de bloc
Éléments en ligne
attribut de bloc
attribut en ligne
Maison interface Web tutoriel HTML Introduction aux balises de bloc et aux balises en ligne en HTML

Introduction aux balises de bloc et aux balises en ligne en HTML

Jun 24, 2017 am 11:44 AM
css display 学习 属性 笔记

Les balises HTML sont généralement divisées en deux types : les balises de bloc et les balises en ligne. Elles sont également appelées éléments de bloc et éléments en ligne.

Élément de bloc

Chaque élément de bloc occupe généralement une ligne entière ou plusieurs lignes entières à lui seul, et peut être défini avec des attributs tels que la largeur, la hauteur, l'alignement, etc. ., qui sont couramment utilisés pour la construction de la mise en page et de la structure des pages Web. Et les conteneurs d'éléments au niveau du bloc peuvent accueillir plusieurs balises imbriquées au niveau du bloc ou des balises en ligne. Les éléments de bloc courants incluent <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc., parmi lesquels la balise <div> Est utilisé dans la production de pages Web. Les éléments de bloc les plus couramment utilisés dans .

Éléments en ligne

Les éléments en ligne n'occupent pas de zone indépendante et s'appuient uniquement sur leur propre taille de police et leur propre taille d'image pour prendre en charge le style de la structure. Les éléments en ligne ne peuvent pas imbriquer les balises au niveau du bloc, mais uniquement les autres balises en ligne. Les éléments en ligne courants incluent <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, &lt ;span> etc., où la balise <span> est l'élément en ligne le plus couramment utilisé.

 1 &lt;!DOCTYPE html&gt; 2 &lt;html lang=&quot;en&quot;&gt; 3 &lt;head&gt; 4     &lt;meta charset=&quot;UTF-8&quot;&gt; 5     &lt;title&gt;display&lt;/title&gt; 6 &lt;/head&gt; 7 &lt;body&gt; 8     &lt;div&gt;我是一个div&lt;/div&gt; 9     &lt;span&gt;我是一个span&lt;/span&gt;10     &lt;strong&gt;我是一个strong&lt;/strong&gt;11 &lt;/body&gt;12 &lt;/html&gt;
Copier après la connexion

Si vous souhaitez que la balise strong soit sur sa propre ligne comme la balise div, est-ce possible la réponse est bien sûr ? . Cela nécessite l'utilisation de l'attribut display. Les valeurs les plus couramment utilisées sont none, inline, block et inline-block. Elles méritent d'être expliquées comme suit

none : cet élément n'est pas affiché et l'est. déplacé dans le document supprimer.
block : Cet élément est affiché comme un élément de niveau bloc : avec des sauts de ligne avant et après, occupant sa propre ligne. Élément en ligne → élément de bloc
inline : Cet élément est affiché sous forme d'éléments en ligne : 1 à côté de 1. Élément de bloc → Élément en ligne
inline-block : composition en fonction des balises en ligne, mais la largeur et la hauteur peuvent être définies, et la hauteur peut affecter la hauteur de la ligne

attribut de bloc

Maintenant mettons ce qui précède Essayez de changer l'élément fort en un élément de niveau bloc

 1 &lt;!DOCTYPE html&gt; 2 &lt;html lang=&quot;en&quot;&gt; 3 &lt;head&gt; 4     &lt;meta charset=&quot;UTF-8&quot;&gt; 5     &lt;title&gt;display&lt;/title&gt; 6  7     &lt;style type=&quot;text/css&quot;&gt; 8         strong { 9             display: block;10         }11     &lt;/style&gt;12 &lt;/head&gt;13 &lt;body&gt;14     &lt;div&gt;我是一个div&lt;/div&gt;15     &lt;span&gt;我是一个span&lt;/span&gt;16     &lt;strong&gt;我是一个strong&lt;/strong&gt;17 &lt;/body&gt;18 &lt;/html&gt;
Copier après la connexion

attribut en ligne

Vous pouvez voyez que l'attribut display est défini sur After block, la balise strong occupe sa propre ligne. Au contraire, si l'élément div devient un élément en ligne, vous devez utiliser la valeur en ligne de l'attribut display

<.>
1 &lt;style type=&quot;text/css&quot;&gt;2     strong {3         display: block;4     }5 6     div {7         display: inline;8     }9 &lt;/style&gt;
Copier après la connexion
pour voir le div La balise et le span sont affichés sur la même ligne

attribut inline-block

Regardons la valeur inline-block, qui signifie littéralement élément au niveau du bloc en ligne, depuis l'introduction initiale, nous avons appris que la largeur et la hauteur des éléments en ligne ne peuvent être prises en charge que par leur propre contenu. Ici, nous définissons d'abord la largeur et la hauteur du. balise span

span {width: 200px;height: 100px;background-color: red;
}
Copier après la connexion

À en juger par les résultats d'exécution du navigateur, la largeur et la hauteur définies pour la durée n'ont aucun effet. afficher l'attribut en ligne pour la durée à voir

span {width: 200px;height: 100px;background-color: red;display: inline-block;
}
Copier après la connexion

aucun attribut

Vous pouvez voir que la largeur définie et height ont pris effet, donnant l'illusion d'un élément de niveau bloc, mais la balise span ici est toujours un élément en ligne. Parfois, nous devons masquer temporairement des éléments sur la page. Dans ce cas, nous pouvons définir l'attribut display de l'élément sur none. Par exemple, nous devons masquer l'élément div sur la page

.
div {display: none;
}
Copier après la connexion

Il est à noter que l'attribut de visibilité en CSS peut également contrôler si les éléments de la page sont affichés ou non

div {visibility: hidden;
}
Copier après la connexion

La conclusion suivante peut être facilement tirée des résultats d'affichage du navigateur

affichage : le paramètre aucun supprime directement la balise actuelle de la page sans affecter la page. . mise en page et le paramètre de visibilité : masqué signifie uniquement que l'élément n'est pas affiché sur la page, mais qu'il occupe toujours de l'espace sur la page.

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!

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

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables Sep 07, 2024 am 09:34 AM

Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil Jun 19, 2024 pm 03:37 PM

Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Dans quelle langue le plug-in du navigateur est-il écrit ? Dans quelle langue le plug-in du navigateur est-il écrit ? May 08, 2024 pm 09:36 PM

Dans quelle langue le plug-in du navigateur est-il écrit ?

Qu'est-ce qu'un nœud dans js Qu'est-ce qu'un nœud dans js May 07, 2024 pm 09:06 PM

Qu'est-ce qu'un nœud dans js

See all articles