15 Layout Flashcards
Set the flow state to normal
position: normal
or position: static
for normal
Make the flowstate move the element from the position it would be in normal
How does it behave when text wrapping happens?
position: relative
Use left right top bottom to push it in those directions
Simply moves the visuals.
They still take up the space.
If the page exceeds the max-width and the text wraps down, it pushes the rest of the elements even though it’s not in that space.
Make the element be in a specific position on the page and move as the user scrolls
Does it push other elements?
position: absolute
Use left right top bottom to push it in those directions
It no longer affects elements
Make the element be in a specific position on the page and NOT move as the user scrolls
Does it push other elements?
position: fixed
It doesn’t affect other elements
Remove an element from regular flow and make it push other elements out of the way (good for images pushing text)
Why is it important to set a width and max width?
float: left
right
none
it can look weird taking up almost the entire width
control the visibility order of elements
Does a higher number mean it’s on top or bottom?
z-index: 10
the higher the number the “higher” it is. A 10 is on top of 9.
What is vh and vw
1vh is equal to 1% of the viewport height and 1vw is equal to 1% of the viewport width
What is em
What is rem
1em is the font-size of an element (or the element’s parent if you’re using it to set font-size). So, for example, if an element’s font-size is 16px, then setting its width to 4em would make its width 64px (16 * 4 == 64).
1rem is the font-size of the root element (either :root or html). The math works the same with rem as it did with em, but without the added complexity of keeping track of the parent’s font size. Relying on em could mean that a particular size could change if the context changes, which is very likely not the behavior you want.
Using a relative size like rem to define font sizes across your website is recommended. Many browsers allow users to change the base font-size to increase readability. If at all possible, it is advisable to respect a user’s wishes regarding font size. You’ll learn more about this from the reading assignments.
What is vmin and vmax
They look at both height and width of the viewport. Then take the min or max version.
How do you get responsive text size without allowing it to get really really small?
calc(16px + 1vw)
What is sticky positioning?
position: sticky
Act like static until you scroll past them
