Latest web development tutorials

CSS Display (affichage) et visibilité (visibilité)

Comment afficher une propriété d'élément est réglé pour être affiché, attribut de visibilité spécifie qu'un élément doit être visible ou caché.

Encadré 1

Box 2
Encadré 3

éléments cachés - display: none ou visibility: hidden

Cacher un élément par l'attribut d'affichage est réglé sur "none", ou la propriété de visibilité pour "caché". Notez, cependant, ces deux méthodes produisent des résultats différents.

visibilité: caché pour cacher un élément, mais élément caché reste le même qu'avant l'occupation et non pas caché l'espace. Autrement dit, même si l'élément est caché, mais affectent encore la mise en page.

Exemples

h1.hidden {visibility:hidden;}

Essayez »

display: none pour cacher un élément, et les éléments cachés ne prennent pas de place. En d'autres termes, cet élément est non seulement caché, et l'espace occupé par l'élément d'origine disparaîtra de la mise en page.

Exemples

h1.hidden {display:none;}

Essayez »


CSS Display - éléments de bloc et inline

élément Block est un élément, en prenant toute la largeur d'un saut de ligne avant et après.

Des exemples d'éléments de bloc:

  • <H1>
  • <P>
  • <Div>

éléments Inline seulement besoin de la largeur nécessaire, ne pas forcer les sauts de ligne.

Des exemples d'éléments en ligne:

  • <Span>
  • <a>

Comment changer un élément d'affichage

Vous pouvez modifier les éléments de bloc et les éléments en ligne, et vice versa, peut rendre la page look est une combinaison d'une manière particulière, et encore suivre les standards du web.

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

Exemples

li {display:inline;}

Essayez »

Les éléments de portée exemple suivants comme éléments de bloc:

Exemples

span {display:block;}

Essayez »

Remarque: Modifier le type d'éléments d'affichage pour voir comment l'élément est affiché, il est ce genre d'éléments.Par exemple: Un élément en ligne mis à display: block est pas autorisé à avoir ses propres éléments imbriqués internes de bloc.


Exemples

D'autres exemples

Comment afficher élément inline.

Cet exemple montre comment afficher en ligne d'un élément.

Comment afficher un élément de bloc.

Cet exemple montre comment afficher un élément de bloc d'élément.

Comment utiliser l'effondrement de la propriété d' une table.

Cet exemple montre comment utiliser la table des propriétés d'effondrement.