CSS Flashcards
Transform
translate, rotate and scale
Position: static
Default value of the browser
Position: relative
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.
Position: Absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any
Position: Fixed
he element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport,
Position: Sticky
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block
Describe the box model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content
Describe CSS Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied
combinator “>”
Matches the direct children of elements matched by the first
combinator “+”
matches the second element only if it immediately follows the first element, and both are children of the same parent element.
combinator “~”
General sibling combinator
matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.
Descendant combinator
typically represented by a single space ( ) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor
Media Query: Media types
all, print, screen and speech
How do you target a printer for media queries?
@media print { … }
nth-child
matches elements based on their position in a group of siblings.
example: ul li:nth-child(2) (will select the second child of that group) duh…
