Layout 1 - thePFLy/Advenci GitHub Wiki

Size Units

Pixels: default units. Pourcent: use pourcentage of a space (section) EMs: Base on font size. Massive is many Em Viewport base: VH(view-height) VW(view-width). Just care about view dimention. Fractionnal: FR. Used in grid. 4columns = 4 * 1FR. (or 2FR 1FR 1FR etc..)

Mins & Maxs

Overflow

By default overflow is

Object-fit

Fit inside the parent element

Position

Static

default, will stick to the document flow. Appears in the order they stacked. The only reason to set an element to static is to remove positioning applied to it.

Relative

Relatively positioned elements are positioned relative to their normal position — around themselves. Relatively positioned elements unlock placement options while their original placement is preserved for document flow. It's like static element

Once you set an element to relative positioning, you can use values relative to this starting position for top, bottom, left, or right. You can also adjust its z-index-value.

Absolute

Take all the place and don't care about the others elements. Can place everywhere on the page. 0px on top ... Always relative to parent

Fixed

Always stay fix to the viewport

Sticky

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Float

Float an image to set the text float around image. IF elements are after the floated element

Z-Index

how elements are stacked. Default z-index is 0 static: on top relative: behind

Display settings

Set in general on the parent element

Block

Elements sit next to each other on the same line (next line at the end)

Flexbox

Justify and aliying content

Grid

Everything on the grod take automatically the next avilable place

Inline-Block

An inline element does not start on a new line. (the element doesn't take place on the page [like 0% opacity])