Sizing Flashcards
What is the default width of a block level element?
100%
Why should we avoid using set pixels units for width?
Setting a width with pixels removes the ability for an element to size responsively without additional media queries.
When we say a block level element defaults to 100% width, what is that 100% referring to?
It refers to the width of the parent element.
Should we use the body element to define a max width?
Generally no, we should use a different, inner container or wrapper to set the max width.
What should we use to set widths of elements in our layouts.
We should attempt to use percentage (%) based widths whenever possible.
What is one of the disadvantages of using percentage based widths?
You can never really know how wide your elements will be, because they are responsive to viewport size.
Should we use height values in our CSS layout?
Generally no, we should avoid setting a height value on our elements.
Why is it best to avoid setting height values on elements in CSS?
Height values can disrupt the responsiveness of our website and cause overflow issues.
What can we do to create more space around out elements without declaring an element’s height?
We can set padding on the child elements within the parent to create space instead of using a declared height.
What is 100vh used for?
When used with height: it sets the element to be 100% of the viewport height.
Is height: 100vh; responsive?
Yes, this height will change in relation to the viewport window, so resizing the browser window will resize this element.
What is a danger of using height: 100vh;?
On smaller screens and mobile, we can have content spill out of the container element using 100vh.
How is vmax used in sizing elements in CSS?
vmax determines its size based on the longest dimension of the viewport.
How is vmin used in sizing elements?
vmin determines its size based on the shortest dimension of the viewport
Were might we use vw in regards to typography?
We might use vw to set the size of title text to make it responsive to viewport width.
What might we use to ensure that title text doesn’t responsively grow too large.
We might use vmin to set the font-size to prevent overgrowth on wide screens.
What might we use to ensure that title text doesn’t responsively grow too large.
We might use vmin to set the font-size to prevent overgrowth on wide screens.
When would you use width: 100%; and max-width: somepx; in the same style rule?
We would use both when we have an element whose width you’d like to limit, but have it remain responsive.
How do we use min() to control sizes in CSS?
The min() contains one or more comma separated calculations and will choose the smaller of the results.
Name three CSS comparison functions.
- min()
- max()
- calc()
With a container size of 900 pixels what will min() equal?
min(50%, 500px)
min will calculate to 50% of 900, or 450 pixels
What do we use the min() comparison function for?
To set a maximum value of something.
What do we use the max() comparison function for?
To set a minimum value of something.
How do we use the max() comparison function in CSS?
The max() contains one or more comma separated calculations and will choose the largest among them.
With a container size of 900px what does max compute to?
max(50%, 500px)
max calculates to 500px
(b/c 50% of 900 is 450px)
How do we use the clamp() function in CSS
The clamp function keeps the value between a min and max value. It takes three parameters:
calc(min, preferred, max)
What is a default style rule regarding images that we might add to the upper code of our CSS?
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.
What unit of measure is ‘ch’?
ch stands for character, and is equivalent to the width of 0 character
Where might we use the ‘ch’ unit of measure?
When controlling typography we might set out max-width to be #ch.
Where are percentages used in CSS?
Typically they are used in setting widths relative to their parent element.
When we talk about relative units, what and how many types are we generally talking about?
We are usually talking about:
- Units relative to font size (rem, em)
- Units relative to viewport size (vh, vw, vmin, vmax)
What is the default width of a block element?
100%
Should we set both a width and height on an image?
Not usually, setting both can distort an image if the ratio does not match the image ration of width and height.
How to we ensure that an image or element does not become too large or too small on the page?
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.
Do we use percentages for the max-width of elements in our display?
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.
