Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Lambda School > [S1L2] User Interface 2 > Flashcards

[S1L2] User Interface 2 Flashcards

-CSS Box Model -CSS Display Properties -CSS Resets

1
Q

Was ist das Box-Modell?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

-Das Box-Modell zu beherrschen

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Was bedeutet das Box-Modell?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Beschreibe das Aussehen des Box-Modells

A
  • Content
  • Padding
  • Border
  • Margin
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was ist der Conent der Box-Theorie in CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Was ist Padding im Box-Modell in CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Was ist Border in der Box-Theorie in CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was ist Margin in der Box-Theorie in CSS?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

Die Box wird TRBL 20px größer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Was sind display: Eigenschaften?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Was macht display: none ?

A
  • Entfernt das HTML Element aus der Website
  • Wird genutzt um Elemente vor dem Nutzer zu verstecken
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

-display: none

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Sind display: none und visibility: hidden das gleiche?

A
  • Nein, display none entfernt das Element auis dem Document
  • visibility: hidden lässt das Element im Document aber zeigt es nur nicht an
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was macht display: inline?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A
  • -
    -Da diese den Flow des Contents nicht stören, sondern sich nur einbetten.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

-Nein

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

-Maximal so viel wie sein Content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Darf man ein block Element mit display: inline nesten?

A

-Nein, niemals.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A
  • verticle- um Elemente veritkal zu alignen
  • text-align um Elemente horizontal zu alignen
20
Q

Was macht die Eigenschaft display: block ?

A

-

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

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

A

-Ja

22
Q

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

A

Ja

23
Q

Wie kann man display: block Elemente positionieren?

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

Was macht die Eigenschaft display: inline-block ?

A
  • 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
25
Q

Was ist ein CSS-Reset?

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

Werden CSS-Resets oft angewendet?

A

Ja, nur selten sind sie nicht wichtig in Projekten.

27
Q

Was geschieht genau bei einem CSS-Reset?

A

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

28
Q

Wie kann man einen CSS-Reset auführen?

A

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

29
Q

Wo werden in der Praxis CSS-Resets oft angewendet?

A

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

30
Q

Was bedeutet es durch einen CSS-Reset zu normalisieren?

A

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

31
Q

Wo muss ein CSS-Rest platziert sein?

A
  • Ganz oben im Code eines Proijektes
  • Damit wg. des kaskadierenden Effektes die Basis gleich ein resettetes CSS ist.
32
Q

Woher kommt das Box-Modell?

A

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

33
Q

Wofür wird das Box-Modell verwendet?

A

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

34
Q

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

A
  • Einfach ein wenig % weniger width nehmen
  • Oftmals ist es die Border, die noch 1 Pixel einnimm,t.
35
Q

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

A

-Bei der Anordnung von Bildern auf einer Website

36
Q

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

A
  • display: inline
  • dispolay: inline-block
37
Q

Ignoriert das display: inline Eigenschaft width und height?

A

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

38
Q

Was ist der User-Agent/Browser Style?

A

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

39
Q

Was bedeutet der Selector main > div { }

A

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

40
Q

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

A

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

41
Q

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

A

.top-content > p {color: red;}

-Sucht in der Klasse top-content nach einem Paragraph

42
Q

was macht overflow: in CSS?

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

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

A

-Durch CSS-Resets

44
Q

Bedeutet 0px auch immer 0px in CSS?

A

-Leider nein, man muss immer sehr viel beachten.

45
Q

Wan sollte man einen CSS-Reset ausführen?

A

-So gut wie immer

46
Q
A

Lambda School (59 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions