Sizing

Question 1

What is the default width of a block level element?

Answer 1

100%

Question 2

Why should we avoid using set pixels units for width?

Answer 2

Setting a width with pixels removes the ability for an element to size responsively without additional media queries.

Question 3

When we say a block level element defaults to 100% width, what is that 100% referring to?

Answer 3

It refers to the width of the parent element.

Question 4

Should we use the body element to define a max width?

Answer 4

Generally no, we should use a different, inner container or wrapper to set the max width.

Question 5

What should we use to set widths of elements in our layouts.

Answer 5

We should attempt to use percentage (%) based widths whenever possible.

Question 6

What is one of the disadvantages of using percentage based widths?

Answer 6

You can never really know how wide your elements will be, because they are responsive to viewport size.

Question 7

Should we use height values in our CSS layout?

Answer 7

Generally no, we should avoid setting a height value on our elements.

Question 8

Why is it best to avoid setting height values on elements in CSS?

Answer 8

Height values can disrupt the responsiveness of our website and cause overflow issues.

Question 9

What can we do to create more space around out elements without declaring an element’s height?

Answer 9

We can set padding on the child elements within the parent to create space instead of using a declared height.

Question 10

What is 100vh used for?

Answer 10

When used with height: it sets the element to be 100% of the viewport height.

Question 11

Is height: 100vh; responsive?

Answer 11

Yes, this height will change in relation to the viewport window, so resizing the browser window will resize this element.

Question 12

What is a danger of using height: 100vh;?

Answer 12

On smaller screens and mobile, we can have content spill out of the container element using 100vh.

Question 13

How is vmax used in sizing elements in CSS?

Answer 13

vmax determines its size based on the longest dimension of the viewport.

Question 14

How is vmin used in sizing elements?

Answer 14

vmin determines its size based on the shortest dimension of the viewport

Question 15

Were might we use vw in regards to typography?

Answer 15

We might use vw to set the size of title text to make it responsive to viewport width.

Question 16

What might we use to ensure that title text doesn’t responsively grow too large.

Answer 16

We might use vmin to set the font-size to prevent overgrowth on wide screens.

Question 17

What might we use to ensure that title text doesn’t responsively grow too large.

Answer 17

We might use vmin to set the font-size to prevent overgrowth on wide screens.

Question 18

When would you use width: 100%; and max-width: somepx; in the same style rule?

Answer 18

We would use both when we have an element whose width you’d like to limit, but have it remain responsive.

Question 19

How do we use min() to control sizes in CSS?

Answer 19

The min() contains one or more comma separated calculations and will choose the smaller of the results.

Question 20

Name three CSS comparison functions.

Answer 20

1. min()
2. max()
3. calc()

Question 21

With a container size of 900 pixels what will min() equal?

min(50%, 500px)

Answer 21

min will calculate to 50% of 900, or 450 pixels

Question 22

What do we use the min() comparison function for?

Answer 22

To set a maximum value of something.

Question 23

What do we use the max() comparison function for?

Answer 23

To set a minimum value of something.

Question 24

How do we use the max() comparison function in CSS?

Answer 24

The max() contains one or more comma separated calculations and will choose the largest among them.

Question 25

With a container size of 900px what does max compute to?

max(50%, 500px)

Answer 25

max calculates to 500px

(b/c 50% of 900 is 450px)

Question 26

How do we use the clamp() function in CSS

Answer 26

The clamp function keeps the value between a min and max value. It takes three parameters:

calc(min, preferred, max)

Question 27

What is a default style rule regarding images that we might add to the upper code of our CSS?

Answer 27

We might consider adding:

img { width: 100%}

to ensure that our images remain responsive when they are placed within a container that might grow or shrink.

Question 28

What unit of measure is ‘ch’?

Answer 28

ch stands for character, and is equivalent to the width of 0 character

Question 29

Where might we use the ‘ch’ unit of measure?

Answer 29

When controlling typography we might set out max-width to be #ch.

Question 30

Where are percentages used in CSS?

Answer 30

Typically they are used in setting widths relative to their parent element.

Question 31

When we talk about relative units, what and how many types are we generally talking about?

Answer 31

We are usually talking about:

1. Units relative to font size (rem, em)
2. Units relative to viewport size (vh, vw, vmin, vmax)

Question 32

What is the default width of a block element?

Answer 32

100%

Question 33

Should we set both a width and height on an image?

Answer 33

Not usually, setting both can distort an image if the ratio does not match the image ration of width and height.

Question 34

How to we ensure that an image or element does not become too large or too small on the page?

Answer 34

We can set both max-width and mix-width for items, this is common with images that we do not want to grow too large.

Question 35

Do we use percentages for the max-width of elements in our display?

Answer 35

Generally, for images, we can set a max-width in a percentage. On containers or containing elements we would set a pixel value for max-width.