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