Layout mechanics

1. Css Cheat Sheet Table
2. Css And Html Cheat Sheet
3. Css Display Grid Cheat Sheet

• Display

  • Controls how an element is represented within the flow.

  • display: inline

  • Allows other elements beside; margin, padding & width don’t work.

  • display: block

  • Takes up an entire line; margin, padding & width work.

  • display: inline-block

  • Allows other elements beside; margin, padding & width work. Can create columns, but will force a space between boxes.

• • Controls whether text is wrapped around the element.

  • float: left|right|none

  • Allows other elements to wrap around the element.

  • Multiple floats

  • Can create columns with boxes touching sides.

  • clear: left|right|both

  • Force the element below floated elements.

  • overflow: hidden

  • Use on a parent element to force it to wrap around the floated children—a clearfix.

• Position

  • Gives strict, coordinate-based control over layout.

  • position: absolute

  • Move an element around based on coordinates.

  • position: relative

  • Added to a parent element to reset absolute child’s coordinates.

  • position: fixed

  • Forces an element to not move when the page is scrolled.

  • z-index

  • Control the stacking order of elements—higher number is closer.

Centering elements

TailWindCSS Cheat sheet. Reference list for all utility classes and CSS properties of Tailwind CSS. Grid-template-columns: 12px 12px 12px; grid-template-rows: 12px 12px 12px.

Css Cheat Sheet Table

• • Works only on display: inline & inline-block elements.

  • Must be applied to the parent element.

• margin: 0 auto

  • Works only on display: block elements.

  • The element must have a width

  • You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom.

• • Works only on display: inline & inline-block elements.

• Centering absolute

  • Use transform & 50% coordinates to center an absolutely positioned element.

  • Or vertical centering too…

• • There’s no float: center

  • You cannot center floated elements.

• Centering with flexbox

  • Flex box has a bunch of different alignment classes—that are always applied to the parent.

  • This will be completely centered within the box.

Css And Html Cheat Sheet

CSS Cheat Sheets These cheat sheets are for helping you with the different aspects of CSS and are available to download in a variety of different file formats. Comprehensive CSS Cheat Sheet (PDF) If you want to learn CSS and utilize it in a proper way, then this amazing cheat sheet will help you to remember all the elements and CSS tags. OverAPI.com is a site collecting all the cheatsheets,all!

Common code

Css Display Grid Cheat Sheet

• • Used to change layout math for width & padding.

  • Put at the top of every CSS file.

• Clearfix for float

  • Add to the parent elements of floats to force the parent to surround the floated element.

  • Can be used instead of overflow: hidden

• • Use width & display to make images flex to their parent’s size.