CSS Affichage et Visibilité

La propriété d'affichage indique si / comment un élément est affiché, et la propriété de visibilité indique si un élément doit être visible ou cachée.

Encadré 1 

Encadré 2 

Encadré 3 

---

Le masquage d'un élément - display: none ou visibility: hidden

Le masquage d'un élément qui peut être fait en définissant la propriété d'affichage à "none" ou la propriété de visibilité à «caché». Toutefois, notez que ces deux méthodes produisent des résultats différents:

la visibilité: les peaux cachés un élément, mais il faudra encore le même espace comme avant.L'élément sera caché, mais toujours affecter la disposition.

Exemple

h1.hidden {visibility:hidden;}

Essayez vous-même »

display: none cache un élément, et il ne prendra pas tout l'espace. L'élément sera caché, et la page sera affichée comme si l'élément n'est pas là:

Exemple

h1.hidden {display:none;}

Essayez vous-même »

---

CSS Affichage - Block et Inline Elements

Elément de bloc est un élément qui occupe toute la largeur complète disponible, et a une coupure de ligne avant et après elle.

Exemples d'éléments de bloc:

• <h1>
• <p>
• <div>

Un élément en ligne ne prend que que la largeur autant que nécessaire, et ne pas forcer les sauts de ligne.

Exemples d'éléments en ligne:

• <span>
• <a>

---

Changement Comment un élément est affiché

Modification d'un élément en ligne à un élément de type bloc, ou vice-versa, peut être utile pour faire la page regarder d'une manière spécifique, et toujours suivre les standards du web.

L'exemple suivant affiche les éléments de liste que les éléments en ligne:

Exemple

li {display:inline;}

Essayez vous-même »

L'exemple suivant affiche les éléments que couvrent les éléments de bloc:

Exemple

span {display:block;}

Essayez vous-même »

Remarque: Changer le type d'affichage d'un élément ne change que la façon dont l'élément est affiché, pas quel type d'élément il est. Par exemple: un élément en ligne configuré pour afficher: bloc n'est pas autorisé à avoir un élément de bloc imbriqué à l'intérieur de celui-ci.

---

Exemples

Comment afficher un élément comme un élément inline.
Cet exemple montre comment afficher un élément comme un élément inline.

Comment afficher un élément comme un élément de bloc
Cet exemple montre comment afficher un élément comme un élément de type bloc.

Comment faire un effondrement élément de table
Cet exemple montre comment faire un effondrement élément de tableau.

---