CSS UNIT 2.1 Media Queries Flashcards
Define CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consist of: margins, borders, padding, and the actual content.
Using padding or border shorthand property what four values are accepted?
top right bottom left
Define the “box-sizing” property
the box-sizing property tells the browser to account for any border and padding values you specify for an elements width and height.
Define “max-width” property
the max-width property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width
Define “viewport-relative” units
“Viewport” are relative unites that act based of percentage of the current browsers viewport
Define “display” property
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Define “inline”
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. Any height and width properties will have no effect.
Define “inline-block”
Displays an element as an inline-level block container. You CAN set height and width values.
Define the “position” property
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
How does “position: static” effect an element?
The element will flow on the page as normal. The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control.
How does “position: relative” effect an element?
If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static
How does “position: absolute” effect an element?
You use the positioning attributes top, left, bottom, and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning.
How does “position: fixed” effect an element?
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
How does “position: sticky” effect an element?
A sticky element will just sit there like a static element, but as you scroll past it, if it’s parent element has room (usually: extra height) the sticky element will behave as if it’s fixed until that parent element is out of room.
Define “float” element
The float property places an element to the left or right side of it’s container. This allows any text or other elements o wrap around it.
