[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
Was ist ein CSS-Reset?
- Alle Browser implementieren styles by Default unterschiedlich,
- Durch CSS Resets können Styles konsistent über viele Browser gleich angezeigt werden
Werden CSS-Resets oft angewendet?
Ja, nur selten sind sie nicht wichtig in Projekten.
Was geschieht genau bei einem CSS-Reset?
-Alle Default Styles eines Browser, sowie das Box-Model und Font-Eigentschaften werden auf 0 gesetzt
Wie kann man einen CSS-Reset auführen?
-Indem man jedes HTML Element auf margin 0, padding 0, border 0, fon-size 100%, font inherit und vertical-align: baseline setzt.
Wo werden in der Praxis CSS-Resets oft angewendet?
-Bei Style-Guidelines z.B. in Unternehmen, damit alles uniform ist.
Was bedeutet es durch einen CSS-Reset zu normalisieren?
-Ein gängiger Weg um nicht alles zu reseten, aber die gängigen Browser Bugs zu umgehen.
Wo muss ein CSS-Rest platziert sein?
- Ganz oben im Code eines Proijektes
- Damit wg. des kaskadierenden Effektes die Basis gleich ein resettetes CSS ist.
Woher kommt das Box-Modell?
-Früher wurden HTML Elemente als Boxes noch auf Papier aufgemalt und geplant
Wofür wird das Box-Modell verwendet?
-Um die Superstruktur der Website zu planen (Header, Navbar, Content Columns, Footer)
Was ist ein einfacher Hack, wenn die Boxes im Box-Modell sich einfach nicht nebeneiander legen lassen?
- Einfach ein wenig % weniger width nehmen
- Oftmals ist es die Border, die noch 1 Pixel einnimm,t.
Wann ist der Unterschied zwischen Inline und inline-block wichtig?
-Bei der Anordnung von Bildern auf einer Website
Welche display Values werden in CSS oft benutzt um Texte nebeneinander anzuordnen?
- display: inline
- dispolay: inline-block
Ignoriert das display: inline Eigenschaft width und height?
-Ja, nur bei display: inline-block werden diese beachtet
Was ist der User-Agent/Browser Style?
-Default Einstellungen von verschiedenen Browsern in Sachen Fonts oder Positionierungen.
Was bedeutet der Selector main > div { }
-Man möchte nur genau den div ansprechen, der unter main steht.
Wie kann man ein paragraph Element in einerm div Klassen finden, egal wie tief sie genested ist?
.top-content p {color: red;}
-Egal wie tief die p tags sind sie werden gefunden
Wie selektiere ich die p tags welche direkt in einem Element mit einer Klasse sind?
.top-content > p {color: red;}
-Sucht in der Klasse top-content nach einem Paragraph
was macht overflow: in CSS?
- Lässt Elemente größer als den Conent machen
- Und lässt Elemente mit Width und Height genau kontrollieren
Wie kann man z.B. unter verschiedenen Betriebsystemem die Buttons gleich aussehen lassen?
-Durch CSS-Resets
Bedeutet 0px auch immer 0px in CSS?
-Leider nein, man muss immer sehr viel beachten.
Wan sollte man einen CSS-Reset ausführen?
-So gut wie immer
