Brainscape's Knowledge GenomeTM

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


See full index

CSS > 1.1 CSS Layout Concepts > Flashcards

1.1 CSS Layout Concepts Flashcards

1
Q

Why do developers use normalize css?

A

It helps your website look consistent across different browsers.

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

What is normalize CSS changing within
the user agent stylesheet?

A

It takes away extra margins, paddings, or CSS properties that create implicit rules.

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

Where is normalize css linked to in the HTML document?

A

Within the head tag, above author css link.

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

Why is normalize css document
placed above the developer css file?

A

The cascading order states that what comes last in CSS,
comes first in actual styling of an element.

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

How does source order impact the cascade?

A

When two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

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

What is specificity within cascading order?

A

Specificity refers to the degree to which rules
are defined in the style.

The more specific, the more it
overrides other style instructions.

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

How does importance impact cascading order?

A

Importance is capable of overriding both source and specificity when it comes to source order.

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

What is the syntax to use importance in CSS?

A

starts with !
uses word importance
closes with semi colon ;

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

What does the CSS property Width do?

A

It controls how wide an element spans the page.

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

How do you specify the width?

A

Width can be specified in units or percentages.

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

What is auto, in a CSS margin context?

A

The browser calculates the margin for you using auto.

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

What is a vertical margin collapse?

A

When items stack, overlap, or lose vertical rhythm
due to a lack of vertical structure.

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

How do you prevent vertical collapsing?

A

Add borders,

Add padding

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

Do horizontal margins collapse?

A

No

Horizontal margins do not collapse.

Vertical margins can collapse though.

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

Between mobile, tablet, and desktop,
which is the simplest to develop?

A

Mobile is the simplest of the three screen sizes.

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

Do tablet and desktop inherit styling from mobile?

A

Yes.

What you style in the mobile version can be passed on to other screen sizes to avoid repetition where relevant.

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

Between mobile, tablet, and desktop,
which has the most restrictions?

A

Mobile

It’s the smallest in screen size.

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

What is a sticky footer?

A

Sticky footer stays at the bottom, regardless of page height.

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

What is min-height property mean?

A

It establishes the minimum height of an element.

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

What is the calc function?

A

The cal function lets you define an attribute based on simple math. The math is done for you.

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

What values are typically needed for the calc function?

A

You typically need to specify the starting and end values for the calc function.

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

What math symbols does CALC function accept?

A

+, -, *, /

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

What direction does inline go?

A

Left to right

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

What direction does block go in?

A

Top to bottom

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

True or False, do block elements take up the full width of the page?

A

True

Yes, block elements can take the full width of the space.

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

Can inline elements stack upon each other? True or false

A

True

Inline elements appear on the same line as each other.

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

How does inline-block, apply spacing within CSS layout?

A

inline-block respects both height and width dimensions

28
Q

Does inline-block let you specify both headings and paddings?

A

Yes

You can specify both margins and paddings with inline-block.

29
Q

Does block start a new line?

A

Yes, block starts a new line in the layout.

30
Q

How much width does inline take in CSS layout?

A

As much as needed, no more and no less.

31
Q

What does the float property do in CSS layouts?

A

Floats wrap content around elements.

32
Q

What is the problem typically seen with floats?

A

Floats can vertically collapse because their parent element collapses too.

33
Q

When floats cause a collapse, how do you fix it?

A

clear:both can be used to fix floats
that have lost vertical rhythm.

34
Q

When floating images, do they need space modifications?

A

Yes

Margins and paddings help images look better
when the float property is applied to it.

35
Q

What does clearfix do?

A

It clears left and right floats.

36
Q

How do you recognize a pseudo element?

A

Pseudo elements generally are seen
in CSS by using two colons

::

37
Q

Clear Floats begins with which type of punctuation?

A

.

38
Q

What are the two keywords joined by
:: that start the clear float CSS?

A
39
Q

What does the content do within the clear float CSS?

A

It creates an empty virtual element.

40
Q

What’s the content CSS to clearfloat?

A
41
Q

What does display table mean within the CSS clearfix?

A

The display table displays a
block element, that’s invisible

42
Q

What does the clear both do within the clearfix?

A

Clear helps control the behavior of floats

Both: clears both sides of the container

43
Q

What’s the CSS for the clear both declaration?

A
44
Q

How do you create a column in HTML?

A

Surround the HTML with a class to group the content

45
Q

What percentages help create 2 and 3 column layouts in CSS?

A

2 columns: 50%

3 columns: 33%

46
Q

What percentage do all columns need to add up to?

A

100%

Any combination of percentages that add up to 100%

47
Q

Do columns need additional spacing?

A

Yes, typically they need space between columns to look right.

48
Q

What is the unit em?

A

em is a relative unit of measurement for
establishing proportional sizes

49
Q

When you float columns, footers can come up from their position. How do you prevent footer movement with floated columns?

A

Use clearfix

50
Q

What does the position CSS property do?

A

It helps establish element position in terms of left, right, top, bottom within a document.

51
Q

In terms of static positioning, what direction do elements move in?

A

They move in main directions (top, bottom, left, right).

52
Q

What is different about absolute positioning?

A

Absolute positions are unmoveable
compared to other elements

53
Q

What do absolute positions rely upon for placement?

A

Offset positions determine where
absolute positions appear on the screen.

54
Q

Absolute and relative positioning work hand in hand

True or false

A

True

Absolute and relative positioning depend on each other.

55
Q

Can you control an absolute positioned
item through relative positioning?

A

An element with relative positioning gives you the control to absolutely position elements anywhere inside it.

56
Q

What is the source of absolute positioned items?

A

An element with absolute positioning is always
relative to the first parent that has a relative position.

57
Q

What happens if the relative position
is missing for an absolute positioned item?

A

If no parent element has a relative position, the browser
viewport is the positioning context by default.

58
Q

What is the relative position in CSS?

Is it normal? What direction?

A

The element is positioned according to the normal flow of the document,

and then offset relative to itself based on the values of top, right, bottom, and left.

59
Q

What is fixed position?

A

Fixed position is like absolute position

Stay fixed to one spot on page

Sticky, remains static

60
Q

What is Z axis?

A

Z axis is like layers, impacting overlap and depth.

61
Q

What is the logic behind z index numbering?

A

The highest number appears at the top.

The lower numbers appear below in order.

62
Q

What is a figcaption?

A

It’s a caption for an element.

Figcaption represents a caption or legend describing
the rest of the contents of its parent figure element.

63
Q

How do you create a fig caption in 2 steps?

What’s step 1?

A

Two steps:

  1. Create a figcaption element, with position of absolute
64
Q

How do you create a figcaption element? Step 2?

Step 1 was to create a figcaption element, with position of absolute

A

Step 2

Use the parent element for relative positioning context

65
Q

What’s the basis for an REM size?

A

It’s based exclusively off of the html font;
it scales consistently and predictably.

CSS (8 decks)

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