[S1L2] User Interface 2 Flashcards
-CSS Box Model -CSS Display Properties -CSS Resets
Was ist das Box-Modell?
-Ein Pattern um Elemente auf einer Website mit CSS zu platzieren
Was ist eines der wichtigsten Skills eines Front-End Developers?
-Das Box-Modell zu beherrschen
Was bedeutet das Box-Modell?
-Elemente besitzen Pixel auf dem Bildschirm -Wenn styles und Inhalt zu Elementen hinzugefügt wird werden diese größer
Beschreibe das Aussehen des Box-Modells
- Content
- Padding
- Border
- Margin
Was ist der Conent der Box-Theorie in CSS?
Content ist der Bereich im Modell, in welchem unser Text und Bilder gerendert werden.
Was ist Padding im Box-Modell in CSS?
Der Space zwischen dem Content und der Border um den Content.
Was ist Border in der Box-Theorie in CSS?
-Ein Bourder/Rahmen der um den Padding herum gestaltet werden kann und den Content verschönert.
Was ist Margin in der Box-Theorie in CSS?
-Der Space zwischen den Border und allem anderen herum auf der Website.
Was bewirkt es wenn man 20 px Padding zu einem Content/Box hinzufügt?
Die Box wird TRBL 20px größer.
Was sind display: Eigenschaften?
-Erweitern das Box-Model/Theorie um wichtige nutzbare Eigenschaften
Was macht display: none ?
- Entfernt das HTML Element aus der Website
- Wird genutzt um Elemente vor dem Nutzer zu verstecken
Über welches HTML Property kann man einfach mit Javascript ein HTML Element verstecken?
-display: none
Sind display: none und visibility: hidden das gleiche?
- Nein, display none entfernt das Element auis dem Document
- visibility: hidden lässt das Element im Document aber zeigt es nur nicht an
Was macht display: inline?
-HTML elemente können in andere Elemente nested werden ohne den Flow des Inhalts zu stören
Was sind gängige HTML Elemente mit der Eigenschaft display: inline?
- -
-Da diese den Flow des Contents nicht stören, sondern sich nur einbetten.
Haben height und width einen Effekt auf Elemente mit der Eigenschaft display. inline?
-Nein
Wie viel PLatz nimmt ein Element mit der Eigenschaft display: inline ein?
-Maximal so viel wie sein Content.
Darf man ein block Element mit display: inline nesten?
-Nein, niemals.
Welche Align Eigenschaften können auf ein Element mit display: inline genutzt werden?
- verticle- um Elemente veritkal zu alignen
- text-align um Elemente horizontal zu alignen
Was macht die Eigenschaft display: block ?
-
- Nehmen so viel Platz ein, wie das Parent Element erlaubt
- Man muss via height, width Eigenschaften arbeiten um display: block zu kontrollieren
Können in display:block Elemente andere block oder inline Elemente genested werden?
-Ja
Fangen display: block Elemente immer an einer new Line an?
Ja
Wie kann man display: block Elemente positionieren?
- margin: auto um sie horizontal zu positionieren
- vertikal kann es ohne flexbox schwierig sein
Was macht die Eigenschaft display: inline-block ?
- Wenn wir den Flow zwar nicht unterbrechen wollen im Document, aber trotzdem height und width zum positionieren nutzen möchten
- Verhält sich wie display: inline
- Daher können mehrere Elemente sich nebeneinander stacken
