CSS

Arrow Arrow

Komplett kostenfrei

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

studysmarter schule studium
d

4.5 /5

studysmarter schule studium
d

4.8 /5

Lerne jetzt mit Karteikarten und Zusammenfassungen für den Kurs CSS an der LMU München.

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is the Visual Formatting Model?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What are the positioning schemes: normal flow, floats and absolute positioning?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What are some useful CSS functions?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What do block, inline and inline-block mean?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What does the flex box "order" property do?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

Some pseudo-classes:

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

When to use the 'inherit' keyword?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is important to notice when using the z-index property?

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

Some flex box properties:

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

What is the difference between 100% and 100vh or vw?


Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

How to move elements to side ends when using flexbox?

Kommilitonen im Kurs CSS an der LMU München. erstellen und teilen Zusammenfassungen, Karteikarten, Lernpläne und andere Lernmaterialien mit der intelligenten StudySmarter Lernapp. Jetzt mitmachen!

Jetzt mitmachen!

Flashcard Flashcard

Beispielhafte Karteikarten für CSS an der LMU München auf StudySmarter:

CSS

What is the Visual Formatting Model?

Algorithm wich calculates boxes and determines the layout of these boxes, for each element in the render tree, in order to determine the final layout of the page.

Factors that matter:

1. box model (content-box, border-box)

2. Box type: inline, block, inline-block

3. floats, position (absolute, relative)

4. stacking contexts

5. other elements in the render tree

6. viewport size, dimensions of images, etc.

CSS

What are the positioning schemes: normal flow, floats and absolute positioning?

1. normal flow

– default is position: relative

– according to source order

2. floats

– element is removed from normal flow

– text & inline elements will wrap around the floated element

– container will not adjust its height to the element

3. absolute positioning

– element is removed from normal flow

– no impact on surrounding elements

– position with top, left, bottom, right relatively to container

– position: absolute, fixed

CSS

What are some useful CSS functions?

– darker(var, %)

– lighter(var, %)

CSS

What do block, inline and inline-block mean?

1. block

– take up 100% parent’s width

– create new line

– block, flex, table, list-item all create blocks

– box model applies

2. inline

– only takes up what it needs

– no line breaks,

– no heights and widths

– only horizontal paddings & margins

3. inline-block

– only takes up what it needs

– no line breaks

– box model applies

CSS

i) How does the CSS parsing work? 

ii) What is the cascade process? 

iii) What are the sources of CSS?

iv) How does the browser know which rule to apply?

i)

1. Step: Resolve conflicting CSS declarations (Cascade)

2. Step: Process final CSS values (from e.g. % values to px)

ii) The cascade process combines different stylesheets and resolves conflicts between different CSS rules (selector+declaration) and declarations, when more than one rule applies to a certain element.

iii)

1. Author/Developer

2. User (through e.g. clicking on button)

3. Browser (user agent) (e.g. links are blue and underlined)

iv) 

Importance (weight) > Specificity > Source order

Importance: 

important! keyword > author >  user > browser

Specificity:

Inline > IDs > classes, pseudo-classes, attribute > elements, pseudo-elements


Order:

The last written rule gets applied.

CSS

What does the flex box "order" property do?

Every flex box item has an order number of 0.

When you put one element order to -1, it is the first element.

CSS

Some pseudo-classes:

:invalid

:placeholder-shown

:root

CSS

When to use the 'inherit' keyword?

When some styles are not inherited from parents and have to be manually inherited.

E.g. the ::before and ::after pseudo elements don’t inherit the styles like „box-sizing“ from their parent.

CSS

What is important to notice when using the z-index property?

It only works when the position is given

CSS

Some flex box properties:

flex: flex-grow(1) flex-shrink(1) flex-basis(%);

flex-wrap

align-self (e.g. to stretch entire height)

CSS

What is the difference between 100% and 100vh or vw?


vh/vw of the viewport

% of the parent

CSS

How to move elements to side ends when using flexbox?

with margin-right: auto on left element.

Melde dich jetzt kostenfrei an um alle Karteikarten und Zusammenfassungen für CSS an der LMU München zu sehen

Singup Image Singup Image
Wave

Andere Kurse aus deinem Studiengang

Für deinen Studiengang an der LMU München gibt es bereits viele Kurse auf StudySmarter, denen du beitreten kannst. Karteikarten, Zusammenfassungen und vieles mehr warten auf dich.

Zurück zur LMU München Übersichtsseite

Was ist StudySmarter?

Was ist StudySmarter?

StudySmarter ist eine intelligente Lernapp für Studenten. Mit StudySmarter kannst du dir effizient und spielerisch Karteikarten, Zusammenfassungen, Mind-Maps, Lernpläne und mehr erstellen. Erstelle deine eigenen Karteikarten z.B. für CSS an der LMU München oder greife auf tausende Lernmaterialien deiner Kommilitonen zu. Egal, ob an deiner Uni oder an anderen Universitäten. Hunderttausende Studierende bereiten sich mit StudySmarter effizient auf ihre Klausuren vor. Erhältlich auf Web, Android & iOS. Komplett kostenfrei. Keine Haken.

Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards
Awards

Bestes EdTech Startup in Deutschland

Awards
Awards

European Youth Award in Smart Learning

Awards
Awards

Bestes EdTech Startup in Europa

Awards

So funktioniert's

Top-Image

Individueller Lernplan

StudySmarter erstellt dir einen individuellen Lernplan, abgestimmt auf deinen Lerntyp.

Top-Image

Erstelle Karteikarten

Erstelle dir Karteikarten mit Hilfe der Screenshot-, und Markierfunktion, direkt aus deinen Inhalten.

Top-Image

Erstelle Zusammenfassungen

Markiere die wichtigsten Passagen in deinen Dokumenten und bekomme deine Zusammenfassung.

Top-Image

Lerne alleine oder im Team

StudySmarter findet deine Lerngruppe automatisch. Teile deine Lerninhalte mit Freunden und erhalte Antworten auf deine Fragen.

Top-Image

Statistiken und Feedback

Behalte immer den Überblick über deinen Lernfortschritt. StudySmarter führt dich zur Traumnote.

1

Lernplan

2

Karteikarten

3

Zusammenfassungen

4

Teamwork

5

Feedback