HTML / CSS LEVEL 2

overflow, display, visibility

overflow

Das overflow property definiert, wie Inhalt dargestellt werden soll, der eine Box überlappt. visible ist default.

 

overflow: visible

overflow: hidden

overflow: scroll

overflow: auto

Aufgabe

Erstelle ein JSBin mit Beispielen für die Verwendung von overflow.

 

Wir besprechen das anschliessend gemeinsam Anhand eines JSBins von jemandem von euch.

display

Mit dem display property wird definiert, welche Art von Box für ein Element erzeugt wird.

 

display: block

display: inline

display: inline-block

display: none

display: none

Wird display: none definiert, so wird keine Box erstellt für das Element.

 

Das Element wird also effektiv nicht gerendert und hat keinen Einfluss auf den Rest des Dokuments.

visibility

Mit dem visibility property wird definiert, ob eine Box sichtbar ist oder nicht.

 

visibility: visible

visibility: hidden

visibility: inherit

visibility: collapse (noch nicht implementiert)

visibility: hidden

visibility: hidden bewirkt, dass das Element nicht sichtbar ist. Es ist allerdings trotzdem noch vorhanden und nimmt seinen Platz ein (im Gegensatz zu display: none)

Aufgabe

Erstelle einen JSBin und mach dich mit den Unterschieden von display: none und visibility: hidden vertraut.

Resourcen

HTML / CSS Level 2: overflow, display

By benib

HTML / CSS Level 2: overflow, display

  • 1,064