- The Box Model consists of: Margin, Content (Width + Height), Border, Padding
-border-radius can modify the border box so it does not have to be a square.
Shorthand Properties (Applies to Margin as well)
-When padding has four values it goes in the order of top, right, bottom, left
-When padding has 3 values it goes in the order of top, left and right, and bottom values
-When padding has 2 values it goes over top/bottom and left/right values
-Horizontal Margins add, Vertical Margins do not; larger of the 2 margins between elements will be the margin used
-Min-width and min-height: Minimum amount of space element will take, will not go less than that.
-Max uses the same concept
-Overflow Property: Deals with content that may spill out of its given element/box (3)
hidden, scroll, visible
-Visibility Property (3): visible, collapse, hidden
-Content Box, Border Box
Content Box is affected by border thickness and padding, border-box model is not
-Block elements take in the full width of their parent elements, thus they do not overlap with other block-level elements. The default value of block-elements position is on the left side. There are 5 total ways to change its position using the position property:
-Static(default value-no need to specify)(normal flow)
-Relative (normal flow)
-Absolute (removed from document flow)
-fixed (removed from document flow)
-Sticky (in document flow)
-Z-index takes integer value (deals more over layers of elements)
-Display Value:
Inline
Block
Inline-Block
-Float Property (left or right)
Must have width specified or will assume full width, thus making float useless
-Clear Property (4 values)
Left
Right
Both
none
Top comments (0)