Affichage et visibilité CSS
Dans le processus de développement habituel, nous rencontrons toujours du texte affiché ou masqué dans des scénarios spécifiques pour obtenir l'effet souhaité. La syntaxe d'affichage et de visibilité en CSS peut masquer et afficher des éléments HTML. Ils peuvent se ressembler, mais ils présentent néanmoins certaines différences.
définition et utilisation de l'affichage
L'attribut display spécifie le type de boîte que l'élément doit générer.
Description
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 négligente 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.
Valeurs possibles
Valeurs aucune 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.
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 sera affiché 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 du manque de support généralisé.
marker Il existe un marqueur de valeur dans CSS, mais il a été supprimé de CSS2.1 en raison du manque de support généralisé.
table Cet élément sera affiché sous forme de tableau au niveau bloc (similaire à <table>), 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 à <table>), sans saut de ligne avant et après le tableau.
table-row-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à <tbody>).
table-header-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à <thead>).
table-footer-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs lignes (similaire à <tfoot>).
table-row Cet élément sera affiché sous forme de ligne de tableau (similaire à <tr>).
table-column-group Cet élément sera affiché sous la forme d'un groupe d'une ou plusieurs colonnes (similaire à <colgroup>).
table-column Cet élément sera affiché sous forme de colonne de cellule (similaire à <col>)
table-cell Cet élément sera affiché sous forme de cellule de tableau (similaire à <td> ; et <th>)
table-caption Cet élément sera affiché sous forme de titre de tableau (similaire à <caption>)
inherit spécifie que la valeur de l'attribut d'affichage doit être hérité de l'élément parent.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>définition et utilisation de la visibilité
L'attribut de visibilité précise si l'élément est visible.
Astuce : Même les éléments invisibles prennent de la place sur la page. Utilisez l'attribut "display" pour créer des éléments invisibles qui n'occupent pas d'espace sur la page.
Description
Cet attribut précise s'il faut afficher la boîte d'élément générée par un élément. Cela signifie que l’élément occupe toujours son espace d’origine, mais peut être totalement invisible. L'effondrement des valeurs est utilisé dans les tableaux pour supprimer des colonnes ou des lignes de la disposition du tableau.
Valeurs possibles
Valeurs Description
valeur par défaut visible. L'élément est visible.
les éléments cachés sont invisibles.
collapse Lorsqu'elle est utilisée dans un élément de tableau, cette valeur peut supprimer une ligne ou une colonne, mais elle n'affectera pas la disposition du tableau. L'espace occupé par les lignes ou les colonnes est mis à disposition pour d'autres contenus. Si cette valeur est utilisée sur d'autres éléments, 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.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>Affichage CSS - Éléments de bloc et en ligne
Un élément de bloc est un élément qui occupe toute la largeur et est précédé et suivi de sauts de ligne. Exemples d'éléments de bloc
:
<h1>
<p>
<div>
éléments en ligne uniquement la largeur nécessaire est requise, aucun saut de ligne n'est forcé.
Exemples d'éléments en ligne :
<span>
<a>
Comment modifier l'affichage d'un element
Vous pouvez modifier les éléments en ligne et les éléments de bloc et vice versa pour donner à la page une apparence spécifique tout en respectant les normes du Web.
L'exemple suivant affiche les éléments de liste en tant qu'éléments en ligne :
li {display:inline;}
L'exemple suivant utilise l'élément span comme élément block :
span {display:block;}
Remarque : modifiez le type d'affichage d'un élément pour voir comment l'élément est affiché et de quel type d'élément il s'agit. Par exemple : un élément en ligne défini sur display:block n'est pas autorisé à contenir des éléments de bloc imbriqués à l'intérieur.
