L'attribut display est l'un des attributs les plus importants en CSS. Il est principalement utilisé pour contrôler la disposition des éléments. Grâce à l'attribut display, vous pouvez définir si et comment l'élément est affiché.
1. Le rôle de l'attribut display
1. L'attribut display peut définir le type d'affichage interne et externe de l'élément.
(1) Type d'affichage externe :
a. Les types d'éléments d'affichage externe incluent les blocs, les éléments en ligne, etc.
b. Le type d'affichage externe déterminera les performances de l'élément dans la disposition fluide.
(2) Type d'affichage interne :
Les types d'affichage internes incluent la disposition flexible, la disposition en grille, la disposition fluide, etc.
Le type d'affichage interne d'un élément contrôle la façon dont ses enfants sont disposés.
2. Mise en page fluide (flux documentaire ou flux régulier) :
Le « flux de documents » ou « mise en page fluide » est la manière dont les éléments « bloc » et « en ligne » sont affichés sur la page avant que des modifications ne soient apportées à la mise en page (par défaut).
Pour le dire simplement et directement, il s'agit d'une méthode de composition qui stipule comment les éléments au niveau du bloc et en ligne sont saisis et affichés sur la page.
(1) Dans la disposition des flux - méthode de disposition des éléments au niveau du bloc :
Les boîtes au niveau du bloc sont disposées verticalement dans l'ordre, en commençant par le haut du bloc contenant.
La distance verticale entre les cases d'un même niveau sera déterminée par l'attribut "marge".
L'espacement vertical entre deux boîtes adjacentes au niveau d'un bloc sera réduit selon le principe de pliage des marges.
(2) Dans une disposition fluide - méthode de disposition des éléments en ligne :
Les boîtes seront disposées horizontalement dans l'ordre en commençant par le haut du bloc contenant.
Seules les marges horizontales, les bordures et le remplissage sont conservés.
Les cases peuvent être alignées verticalement de différentes manières : en bas ou en haut, ou alignées en bas du texte.
2. Type d'affichage externe de l'élément
1. splay spécifie le type d'affichage de l'élément à travers les valeurs d'attribut suivantes
(1) niveau de bloc de bloc
(2) bloc en ligne bloc en ligne
(3) en ligne
2. Les types d'affichage des éléments sont divisés en : niveau bloc et en ligne, etc.
3. Les éléments en ligne (en ligne) sont divisés en : éléments en ligne en ligne et éléments de bloc en ligne en ligne.
(1) éléments de niveau bloc diblock
1. Les éléments courants au niveau du bloc sont :
<p>, <div>, <ul>, <ol>, <li>, <h1>~<h6>, <dl>, etc.
2. Caractéristiques des éléments de niveau bloc :
(1) Ligne exclusive
(2) Vous pouvez définir les attributs de largeur et de hauteur.
(3) Si la largeur n'est pas définie, la largeur par défaut est la largeur de la zone de contenu de l'élément parent.
(4) Tout type d'éléments peut être placé dans des éléments de niveau bloc, mais d'autres éléments de bloc ne peuvent pas être placés dans des balises d'éléments de texte.
(5) Les balises p et div ne peuvent pas être placées dans la balise p.
(6) Les balises p et div ne peuvent pas être placées dans les balises h1-h6.
(2) éléments de bloc en ligne inline-block
1. Les éléments suivants ont les caractéristiques des éléments de bloc en ligne :
<img>, éléments de formulaire, <video>, <audio>, etc. Ces éléments sont essentiellement appelés éléments remplaçables (classés comme éléments en ligne)
2. Caractéristiques des éléments de bloc en ligne :
(1) Les éléments de bloc en ligne (ou en ligne) adjacents seront affichés sur une ligne. S'ils ne peuvent pas être placés, ils seront renvoyés sur une autre ligne.
(2) Il y aura des espaces vides entre les éléments de bloc en ligne adjacents.
(3) Les attributs width et height peuvent être définis. La largeur par défaut d'un élément est la largeur de son propre contenu.
(3) éléments en ligne (en ligne)
1. Les éléments en ligne courants incluent :
<a>, <strong>, <span>, <i>, <del>, etc.
2. Caractéristiques des éléments en ligne :
Les éléments en ligne adjacents seront affichés sur une seule ligne. S'ils ne peuvent pas tenir, ils seront affichés sur une nouvelle ligne.
La définition des propriétés de largeur et de hauteur n'est pas valide. Sa largeur et sa hauteur s'agrandissent en fonction de la taille de son contenu.
Seuls du texte ou d'autres éléments en ligne peuvent être placés à l'intérieur d'éléments en ligne.
3. Remarque :
La balise <a> ne peut pas être placée à l'intérieur de la balise <a>, mais les éléments de niveau bloc peuvent être placés à l'intérieur de la balise <a>.
Dans le développement réel, la balise <a> sera convertie en élément de niveau bloc dans certains cas.
Comparaison de trois types d'éléments
3. Conversion entre éléments en ligne et éléments de niveau bloc
Il nous suffit d'ajouter la valeur de l'attribut d'affichage correspondant à l'élément correspondant pour convertir l'élément en type d'élément correspondant.
(1) Utilisez display: block; pour convertir des éléments en éléments de niveau bloc.
Exemple:
<!DOCTYPEhtml><html><head><style>a{display:block;width:150px;height:50px;background-color:#ACC;line-height:50px;text-align:center;text-decoration : none;></style></head><body><ahref=>lien de programmation dotcpp</a></body></html>Résultats en cours d'exécution :
(2) Utilisez display: inline pour convertir des éléments en éléments en ligne. Cependant, il existe peu d'applications permettant de convertir des éléments en éléments en ligne.
(3) Utilisez display: inline-block pour convertir des éléments en éléments de bloc en ligne.
4. Méthode des éléments cachés
Remplir:
(1) Les valeurs d'affichage autres que Aucune sont des éléments d'affichage.
(2) visibilité : visible ; est l'élément d'affichage.
Exemple:
La valeur de l'attribut none de display peut être utilisée pour masquer des éléments. Elle a une fonction similaire à visible: Hidden;. La différence est que display: none; en masquant l'élément, il masquera également la position occupée par l'élément. display: none; est généralement utilisé en conjonction avec JavaScript pour masquer ou afficher un élément. Voici un exemple pour démontrer :
<!DOCTYPEhtml><html><head><style>div{width:350px;height:100px;background-color:#AAA;}</style></head><body><divid=box></div ><buttononclick=change_box(this)>Masquer</button><script>functionchan ge_box(obj){varbox=document.getElementById('box');if(box.style.display=='none'){box.style.display=;obj.innerHTML=hide;}else{box.style. display=none;obj.innerHTML=display;}}</script></body></html>Résultats en cours d'exécution :
5. La différence entre les deux méthodes de masquage
6. Supprimez l'espace blanc par défaut des éléments de bloc en ligne
Des espaces sont créés par défaut entre les éléments de bloc en ligne.
Raisons des lacunes :
(1) Lorsque les éléments sont formatés en tant qu'éléments en ligne, les caractères d'espacement (espaces, retours chariot, sauts de ligne, etc.) entre les éléments seront traités par le navigateur.
(2) Selon la méthode de traitement des espaces (la valeur par défaut est normale, qui fusionne les espaces en excès), le retour chariot et le saut de ligne dans le code HTML d'origine sont convertis en un caractère d'espace, de sorte que des espaces apparaissent entre les éléments.
(3) L'espacement entre ces éléments changera avec la taille de la police
Solution:
(1) Ajoutez l'élément parent et réécrivez la taille de police de l'élément enfant en même temps
L'attribut font-size a un héritage, donc l'élément parent font-size:0; sera hérité de l'élément enfant span, et l'élément enfant doit réinitialiser la taille de la police.
(2) Ajouter un flotteur à l'élément
Après avoir ajouté un flotteur à un élément, celui-ci se détachera du flux de documents. Lorsque la hauteur de l'élément parent n'est pas ajoutée, il y aura un problème d'effondrement de la hauteur et le problème causé par le flotteur doit être résolu.
(3) Dans l'espace entre les images, ajoutez display:block;
Après avoir ajouté display:block, l'image devient un élément de niveau bloc et occupe une ligne exclusive.