Maison >interface Web >tutoriel CSS >Masquer et afficher les éléments CSS

Masquer et afficher les éléments CSS

不言
不言original
2018-04-24 16:49:481719parcourir

Afficher et masquer

1. Introduction :

affichage : Faire apparaître le paragraphe à l'intérieur. la ligne Box

visibilité : Attribut précise si l'élément est visible.

2. attribut d'affichage

valeur description
aucun Cet élément ne sera pas affiché.
bloc Cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après celui-ci élément.
en ligne Par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément.
inline-block Élément de bloc en ligne. (Nouvelle valeur en CSS2.1)
list-item Cet élément sera affiché sous forme de liste.
run-in Cet élément apparaîtra comme un élément de niveau bloc ou un élément en ligne, selon le contexte.
compact Il existe une valeur compacte en CSS, mais elle a été supprimée de CSS2.1 en raison de manque de soutien généralisé.
marker Il existe un marqueur de valeur en CSS, mais il a été supprimé de CSS2.1 en raison de manque de soutien généralisé.
table Cet élément sera affiché sous forme de tableau au niveau du bloc (similaire à 43c4707103c6cc3650c2aeb71d2b1e8d), avec des sauts de ligne avant et après le tableau.
inline-table Cet élément sera affiché sous forme de tableau en ligne (similaire à 97e00e47b59682947e7f39942b31d327).
table-header-group Cet élément sera affiché sous forme de groupe d'une ou plusieurs lignes (similaires à ae20bdd317918ca68efdc799512a9b39).
table-footer-group Cet élément sera affiché sous forme de groupe d'une ou plusieurs lignes (similaires à 06669983c3badb677f993a8c29d18845).
table-row Cet élément sera affiché sous forme de ligne de tableau (similaire à 868c3f8d39a371013a78a87c30e1b0d8).
table-column-group Cet élément sera affiché sous forme de groupe d'une ou plusieurs colonnes (similaires à 879b49175114808d868f5fe5e24c4e0b).
table-column Cet élément sera affiché sous forme de colonne de cellules (similaire à 28920da7d71c8982bf764ce36d28a7bc et b4d429308760b6c2d20d6300079ed38e)
légende-table Cet élément sera affiché sous forme de titre de tableau (similaire à 63bd76834ec05ac1f4c0ebbeaafb0994)
hériter spécifie que la valeur de l'attribut display doit être héritée de l'élément parent.

3. Attribut de visibilité

visible Valeur par défaut. L'élément est visible. L'élément caché est invisible. collapseLorsqu'elle est utilisée dans un élément de tableau, cette valeur supprime une ligne ou une colonne, mais ce n'est pas le cas Cela affectera la disposition de la table. L'espace occupé par les lignes ou les colonnes est mis à disposition pour d'autres contenus. Si cette valeur est utilisée sur un autre élément, elle sera rendue "cachée". inherit spécifie que la valeur de l'attribut de visibilité doit être héritée de l'élément parent.

4. "display:none" et "visibility:hidden"

(1) display:none : Une fois l'élément masqué, il n'occupe pas sa position d'origine

(2 ) visibilité : masqué : Une fois l'élément masqué, il occupe sa position d'origine

5. Exemple

  h1{
          visibility: hidden;//隐藏占用元素空间
          display: none;//隐藏不占用空间
      }
  p{
          display: inline;//改变为内联元素
      }
  h2{
          display: block;//改变块级元素
      }

Recommandations associées :

Explication détaillée Une façon simple de centrer les éléments CSS


描述
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。
Valeur
Description

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:
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