Affichage CSS (bloc en ligne aucun) propriétés communes et tutoriels d'utilisation

L'attribut

display spécifie le type de boîte que l'élément doit générer.

Cet attribut permet de définir le type de zone d'affichage générée par l'élément lors de la création d'une mise en page. Pour les types de documents tels que HTML, une utilisation imprudente de display peut être dangereuse, car elle peut violer la hiérarchie d'affichage déjà définie en HTML. Pour XML, puisque XML n'a pas ce type de hiérarchie intégré, tout affichage est absolument nécessaire.

1. Introduction détaillée de l'attribut d'affichage

1 Explication des valeurs possibles de l'attribut d'affichage CSS<.>

L'éditeur suivant vous apportera une brève discussion des valeurs possibles​​de l'attribut Display de CSS. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. none Cet élément ne sera pas affiché.

block Cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après cet élément.

2.

Introduction détaillée à l'attribut display en CSS

Tous les principaux navigateurs prennent en charge l'attribut display.

Remarque : Si !DOCTYPE est spécifié, Internet Explorer 8 (et versions ultérieures) prend en charge les valeurs d'attribut "inline-table", "run-in", "table", "table-caption", " cellule-table", "colonne-table", "groupe-colonne-table", "ligne-table", "groupe-ligne-table" et "hériter".

3.

Explication détaillée de la différence entre affichage et visibilité

La visibilité des objets cachés conserve également l'espace physique occupé par l'objet lorsqu'il est affiché, tandis que l’affichage ne le fait pas.

vilibilité : caché (caché), visible (affichage) style="vislbility:hidden"

affichage : aucun (caché), bloc (affichage) style="display:none"

4.

Une compréhension approfondie de (affichage, flotteur, position) en CSS

l'affichage est utilisée pour définir le mode d'affichage des éléments

affichage : block | none | inline

inline : Spécifiez l'objet en tant qu'élément en ligne

block : Spécifiez l'objet en tant qu'élément de bloc

aucun : Objet caché

2. Introduction détaillée de l'attribut displayblock

1

Que dois-je faire si les éléments displayblock ou inlineblock ne peuvent pas être affichés dans Chrome ?

Que dois-je faire si un élément display: inline-block ou display: block ne peut pas être affiché normalement sous Chrome

La page DEMO n'a qu'une seule zone de saisie lorsque la zone de saisie a le focus ? , la hauteur devient plus grande et Afficher l'affichage du nombre de mots et le bouton de réponse.
Le problème est maintenant que Chrome ne peut cliquer sur la zone de saisie qu'après la première actualisation et la hauteur augmentera et affichera les éléments d'affichage du nombre de mots et du bouton de réponse. Cependant, si vous cliquez sur la zone de saisie pour la deuxième fois, uniquement les éléments du bouton de réponse. la hauteur augmentera, mais vous ne le verrez pas. Vient maintenant les éléments d'affichage du nombre de mots et du bouton de réponse (Firefox est normal)

2

Comment faire l'affichage et le masquage des divs<.>L'attribut display définit le mode d'affichage de l'élément, la fonctionnalité de script correspondante est display, les valeurs facultatives sont none, block et inline La description de chaque valeur est la suivante :

. none masque l'élément et ne conserve pas l'espace lorsque l'élément est affiché.

Afficher les éléments en mode bloc.
inline affiche l'élément en ligne.

3.

La raison pour laquelle le retour à la ligne de li inside-block n'est pas valide dans IE11

Récemment, je fais une liste de balises de page Web, exigeant que le retour à la ligne ne soit pas autorisé, j'ai pensé que ce serait plus facile au début, et j'ai fini d'écrire le code en quelques clics, et j'ai réussi le test dans les navigateurs Firefox et Chrome. Cependant, quand je l'ai regardé dans. IE11, de manière inattendue, n'a pas obtenu les résultats escomptés. li inside-block n'a pas fonctionné dans IE11 ! Je change toujours de ligne !

3. Introduction détaillée de l'affichage : attribut en ligne 1

Explication détaillée de display:flex||inline-flex in. Attributs CSS

Flex est l'abréviation de Flexible Box, qui signifie « mise en page flexible » et est utilisée pour fournir une flexibilité maximale pour le modèle de boîte. N’importe quel conteneur peut être désigné comme une mise en page Flex.

flex : Afficher l'objet sous forme de boîte flexible

inline-flex : affichez l'objet sous forme de boîte élastique au niveau du bloc en ligne

2 Explication détaillée de la façon de résoudre l'écart causé par display:inline-block dans la mise en page CSS.

J'ai utilisé display:inline-block lors de la création de cartes coulissantes horizontales dans H5, mais j'ai constaté qu'il y avait en fait des espaces entre les éléments sur le ; même ligne horizontale Un espace a été créé, ce qui n'était évidemment pas l'effet que je souhaitais, j'ai donc changé en flottant à gauche. Cela a résolu le problème de l'espace, mais cela a nécessité de définir la largeur de l'élément parent pour obtenir un défilement horizontal vers la gauche et la droite, ce qui a augmenté. la quantité de code. , car le nombre de cartes n'est pas fixe et la largeur de son élément parent doit être définie en temps réel, ce qui nécessite l'utilisation de js, donc la quantité de code augmente, et ce n'est pas le meilleur. choix. Il semble que la meilleure solution soit d'utiliser display:inline-block;, donc le problème d'écart apparaît

4. Introduction détaillée de l'attribut display:none

1.

Quelles sont les différences entre display:none et visible:hidden

Ce à quoi j'ai répondu à l'époque, c'est que les deux peuvent masquer des éléments, mais ils le feront une fois l'élément terminé. défini sur display:none;, l'espace du flux de documents précédemment occupé par l'élément sera annulé en même temps, mais visible:hidden; fait que l'élément occupe toujours de l'espace même s'il n'est pas affiché.

C'était un entretien téléphonique. Après avoir répondu à la question, l'autre partie n'a pas continué à poser des questions sur les connaissances liées à l'affichage.
En y réfléchissant maintenant, j'ai vraiment de la chance. Si quelqu'un me pose des questions sur les connaissances liées à l'affichage, je dois faire attention à ce à quoi je dois faire attention lorsque j'utilise l'affichage : le bloc en ligne. Je ne pourrai certainement pas me battre.

2.

Explication de 5 façons de masquer des éléments de page avec CSS

Il existe de nombreuses façons de masquer des éléments de page avec CSS. Vous pouvez définir l'opacité sur 0, la visibilité sur cachée, l'affichage sur aucun ou la position sur absolue, puis définir la position sur la zone invisible.

Vous êtes-vous déjà demandé pourquoi nous avons tant de techniques pour masquer des éléments, mais elles semblent toutes produire le même effet ? Chaque méthode présente en fait des différences subtiles par rapport aux autres, et ces différences déterminent quelle méthode est utilisée dans une situation spécifique. Ce tutoriel couvrira les petites différences dont vous devez vous souvenir, vous permettant de choisir la méthode appropriée parmi les méthodes ci-dessus pour masquer des éléments en fonction de différentes situations

3

Exemples d'affichage de divs cachés à l'aide du tutoriel CSS3.

Il existe de nombreuses façons d'afficher et de masquer un effet spécial p. Ce qui suit explique comment l'implémenter en utilisant du CSS3 pur. Les amis intéressés peuvent se référer à

. 5. Questions et réponses connexes

1. Y a-t-il une différence entre

un {display:block;} et l'affichage dans JS ?

2.

Li et ul ont-ils besoin d'afficher : en ligne ?

3.

css - différences de disposition, display:flex et display:-webkit-box

[Recommandations associées]

1.

Explication détaillée du type CSS BOX et de l'attribut d'affichage

2 Explication détaillée de l'affichage CSS3 : attribut de modèle de boîte.

3. Affichage de la mise en 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!