[S1L2] User Interface 2

Question 1

Was ist das Box-Modell?

Answer 1

-Ein Pattern um Elemente auf einer Website mit CSS zu platzieren

Question 2

Was ist eines der wichtigsten Skills eines Front-End Developers?

Answer 2

-Das Box-Modell zu beherrschen

Question 3

Was bedeutet das Box-Modell?

Answer 3

-Elemente besitzen Pixel auf dem Bildschirm -Wenn styles und Inhalt zu Elementen hinzugefügt wird werden diese größer

Question 4

Beschreibe das Aussehen des Box-Modells

Answer 4

• Content
• Padding
• Border
• Margin

Question 5

Was ist der Conent der Box-Theorie in CSS?

Answer 5

Content ist der Bereich im Modell, in welchem unser Text und Bilder gerendert werden.

Question 6

Was ist Padding im Box-Modell in CSS?

Answer 6

Der Space zwischen dem Content und der Border um den Content.

Question 7

Was ist Border in der Box-Theorie in CSS?

Answer 7

-Ein Bourder/Rahmen der um den Padding herum gestaltet werden kann und den Content verschönert.

Question 8

Was ist Margin in der Box-Theorie in CSS?

Answer 8

-Der Space zwischen den Border und allem anderen herum auf der Website.

Question 9

Was bewirkt es wenn man 20 px Padding zu einem Content/Box hinzufügt?

Answer 9

Die Box wird TRBL 20px größer.

Question 10

Was sind display: Eigenschaften?

Answer 10

-Erweitern das Box-Model/Theorie um wichtige nutzbare Eigenschaften

Question 11

Was macht display: none ?

Answer 11

• Entfernt das HTML Element aus der Website
• Wird genutzt um Elemente vor dem Nutzer zu verstecken

Question 12

Über welches HTML Property kann man einfach mit Javascript ein HTML Element verstecken?

Answer 12

-display: none

Question 13

Sind display: none und visibility: hidden das gleiche?

Answer 13

• Nein, display none entfernt das Element auis dem Document
• visibility: hidden lässt das Element im Document aber zeigt es nur nicht an

Question 14

Was macht display: inline?

Answer 14

-HTML elemente können in andere Elemente nested werden ohne den Flow des Inhalts zu stören

Question 15

Was sind gängige HTML Elemente mit der Eigenschaft display: inline?

Answer 15

• -
  -Da diese den Flow des Contents nicht stören, sondern sich nur einbetten.

Question 16

Haben height und width einen Effekt auf Elemente mit der Eigenschaft display. inline?

Answer 16

-Nein

Question 17

Wie viel PLatz nimmt ein Element mit der Eigenschaft display: inline ein?

Answer 17

-Maximal so viel wie sein Content.

Question 18

Darf man ein block Element mit display: inline nesten?

Answer 18

-Nein, niemals.

Question 19

Welche Align Eigenschaften können auf ein Element mit display: inline genutzt werden?

Answer 19

• verticle- um Elemente veritkal zu alignen
• text-align um Elemente horizontal zu alignen

Question 20

Was macht die Eigenschaft display: block ?

Answer 20

-

• Nehmen so viel Platz ein, wie das Parent Element erlaubt
• Man muss via height, width Eigenschaften arbeiten um display: block zu kontrollieren

Question 21

Können in display:block Elemente andere block oder inline Elemente genested werden?

Answer 21

-Ja

Question 22

Fangen display: block Elemente immer an einer new Line an?

Answer 22

Ja

Question 23

Wie kann man display: block Elemente positionieren?

Answer 23

• margin: auto um sie horizontal zu positionieren
• vertikal kann es ohne flexbox schwierig sein

Question 24

Was macht die Eigenschaft display: inline-block ?

Answer 24

• 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

Question 25

Was ist ein CSS-Reset?

Answer 25

- Alle Browser implementieren styles by Default unterschiedlich, - Durch CSS Resets können Styles konsistent über viele Browser gleich angezeigt werden

Question 26

Werden CSS-Resets oft angewendet?

Answer 26

Ja, nur selten sind sie nicht wichtig in Projekten.

Question 27

Was geschieht genau bei einem CSS-Reset?

Answer 27

-Alle Default Styles eines Browser, sowie das Box-Model und Font-Eigentschaften werden auf 0 gesetzt

Question 28

Wie kann man einen CSS-Reset auführen?

Answer 28

-Indem man jedes HTML Element auf margin 0, padding 0, border 0, fon-size 100%, font inherit und vertical-align: baseline setzt.

Question 29

Wo werden in der Praxis CSS-Resets oft angewendet?

Answer 29

-Bei Style-Guidelines z.B. in Unternehmen, damit alles uniform ist.

Question 30

Was bedeutet es durch einen CSS-Reset zu normalisieren?

Answer 30

-Ein gängiger Weg um nicht alles zu reseten, aber die gängigen Browser Bugs zu umgehen.

Question 31

Wo muss ein CSS-Rest platziert sein?

Answer 31

- Ganz oben im Code eines Proijektes - Damit wg. des kaskadierenden Effektes die Basis gleich ein resettetes CSS ist.

Question 32

Woher kommt das Box-Modell?

Answer 32

-Früher wurden HTML Elemente als Boxes noch auf Papier aufgemalt und geplant

Question 33

Wofür wird das Box-Modell verwendet?

Answer 33

-Um die Superstruktur der Website zu planen (Header, Navbar, Content Columns, Footer)

Question 34

Was ist ein einfacher Hack, wenn die Boxes im Box-Modell sich einfach nicht nebeneiander legen lassen?

Answer 34

- Einfach ein wenig % weniger width nehmen - Oftmals ist es die Border, die noch 1 Pixel einnimm,t.

Question 35

Wann ist der Unterschied zwischen Inline und inline-block wichtig?

Answer 35

-Bei der Anordnung von Bildern auf einer Website

Question 36

Welche display Values werden in CSS oft benutzt um Texte nebeneinander anzuordnen?

Answer 36

- display: inline - dispolay: inline-block

Question 37

Ignoriert das display: inline Eigenschaft width und height?

Answer 37

-Ja, nur bei display: inline-block werden diese beachtet

Question 38

Was ist der User-Agent/Browser Style?

Answer 38

-Default Einstellungen von verschiedenen Browsern in Sachen Fonts oder Positionierungen.

Question 39

Was bedeutet der Selector main \> div { }

Answer 39

-Man möchte nur genau den div ansprechen, der unter main steht.

Question 40

Wie kann man ein paragraph Element in einerm div Klassen finden, egal wie tief sie genested ist?

Answer 40

.top-content p {color: red;} -Egal wie tief die p tags sind sie werden gefunden

Question 41

Wie selektiere ich die p tags welche direkt in einem Element mit einer Klasse sind?

Answer 41

.top-content \> p {color: red;} -Sucht in der Klasse top-content nach einem Paragraph

Question 42

was macht overflow: in CSS?

Answer 42

- Lässt Elemente größer als den Conent machen - Und lässt Elemente mit Width und Height genau kontrollieren

Question 43

Wie kann man z.B. unter verschiedenen Betriebsystemem die Buttons gleich aussehen lassen?

Answer 43

-Durch CSS-Resets

Question 44

Bedeutet 0px auch immer 0px in CSS?

Answer 44

-Leider nein, man muss immer sehr viel beachten.

Question 45

Wan sollte man einen CSS-Reset ausführen?

Answer 45

-So gut wie immer