div css afficher masquer

div css display and hide

CSS peut contrôler la visibilité des éléments via l'attribut display. Les méthodes suivantes sont couramment utilisées :

1. display: none;
   Utilisez display: none pour masquer les éléments. display : none;, l'élément n'apparaîtra pas sur la page et ne prendra pas de place.

Par exemple, dans l'extrait de code suivant, l'élément div est défini sur display : none;, il ne sera donc pas affiché sur la page :

<div class="hidden">这是要隐藏的内容</div>

<style>
.hidden{
  display: none;
}
</style>

2. display: block;
   display: block; se présentera sous la forme d'un spectacle d'éléments au niveau du bloc. Par défaut, l'élément div est un élément de niveau bloc et sera affiché sur sa propre ligne sur la page.

Par exemple, dans l'extrait de code suivant, l'élément div est défini pour afficher : block;, qui sera affiché en tant qu'élément de niveau bloc :

<div class="block">这是块级元素</div>

<style>
.block{
  display: block;
}
</style>

3. display: inline;
   display: inline; L'élément sera affiché sous forme d'élément en ligne. Par défaut, l'élément span est un élément en ligne et sera affiché sur la même ligne que les autres éléments ou textes en ligne sur la page.

Par exemple, dans l'extrait de code suivant, l'élément div est défini pour afficher : inline;, qui sera affiché comme un élément en ligne :

<div class="inline">这是行内元素</div>

<style>
.inline{
  display: inline;
}
</style>

4. display: inline-block;
   display: inline-block signifie; que l'élément sera affiché en ligne Affiché sous forme d'éléments de niveau bloc. Les éléments de niveau bloc en ligne peuvent être affichés sur la même ligne que d'autres éléments comme les éléments en ligne, et peuvent également définir la largeur, la hauteur, les marges intérieures et extérieures et d'autres attributs comme les éléments de niveau bloc.

Par exemple, dans l'extrait de code suivant, l'élément div est défini pour afficher : inline-block;, qui sera affiché comme un élément de niveau bloc en ligne :

<div class="inline-block">这是行内块级元素</div>

<style>
.inline-block{
  display: inline-block;
}
</style>

L'utilisation de l'attribut display peut facilement afficher et masquer des éléments . Il convient de noter que si un élément est défini sur display: none;, tous les éléments enfants sous l'élément seront également masqués. Par conséquent, dans les applications pratiques, les attributs d’affichage appropriés doivent être sélectionnés en fonction de besoins spécifiques.

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!