CSS Flashcards
display: block
always starts on a new line and takes up the full width available
display: inline
does not start on a new line and only takes up as much width as necessary
display: none
element will be hidden, and the page will be displayed as if the element is not there
visibility: hidden
element will be hidden but will still take up the same space as before
position: static
default css positioning. Positioned according to the normal flow of the page
position: relative
positioning that is related to its normal position. Setting the top, right, bottom, and left properties of a this element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element
position: fixed
positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
position: absolute;
position fixed inside of container element
position: sticky
position is relative till user scrolls to a certain position, then becomes fixed to a certain spot
center a div using flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
What is CSS outline
An outline is a line drawn outside the element’s border.
what to do when the browser window is smaller than the width of the element so the browser adds a horizontal scrollbar to the page.
use max width property
What is a pseudo-class?
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.
Height: auto
Take up the height of children
position: relative
Elements with position: relative are positioned relative to their normal position. This means that you can use the top, bottom, left, or right properties to move the element from its original position. However, the element still takes up its original space in the document flow, even if it is moved.
