Display and Visibility


Das Display-Eigenschaft gibt an, ob / wie ein Element angezeigt wird, und die Sichtbarkeit (visibility) Eigenschaft gibt an, ob ein Element sichtbar sein soll oder versteckt.

Ausblenden eines Elements - display: none oder visibility: hidden

Ausblenden eines Elements kann durch Einstellung der Display-Eigenschaft auf "none" oder die Sichtbarkeit Eigenschaft zu tun "versteckt" werden. Beachten Sie jedoch, dass diese beiden Methoden zu unterschiedlichen Ergebnissen führen:

visibility: hidden versteckt ein Element, aber es bleibt noch den gleichen Raum wie zuvor. Das Element wird ausgeblendet, aber immer noch die Gestaltung beeinflußt. img.hidden {visibility:hidden;}

display:none versteckt ein Element und es nimmt keinen Raum auf. Das Element wird versteckt, und die Seite wird angezeigt als das Element ist nicht dort:
img.hidden {display:none;}

Block- und Inline Elements

Ein Blockelement ist ein Element, das die volle vorhandene Breite aufnimmt, und hat eine Linie Bruch vor und nach ihm.   <h1> , <p>, <div><li>
li {display:inline;}

Ein Inline-Element nimmt nur so viel Breite falls erforderlich auf und zwingt nicht Linie Brüche. <a>, <span>.   span {display:block;}

Hinweis: Ändern der Anzeige Typ eines Elements ändert sich nur, wie das Element angezeigt wird, nicht, welches Element es ist. Zum Beispiel: Ein Inline-Element auf display: block ist nicht gestattet, ein Blockelement haben, das nach innen von ihm genistet wird.