Skip to content

Instantly share code, notes, and snippets.

@onlurking
Last active August 19, 2021 19:46
Show Gist options
  • Save onlurking/91f2ca98838dcdbc4da13e5b6e92622b to your computer and use it in GitHub Desktop.
Save onlurking/91f2ca98838dcdbc4da13e5b6e92622b to your computer and use it in GitHub Desktop.

CSS

Mental Models

CSS Specs

The Box Model

Normal Flow

  • flow layout, normal flow e block/inline layout.

https://codepen.io/onlurking/pen/OJmdabw

  • border: 1px solid em header.
  • bg color e padding no span -- span não respeita margin e padding top e bottom.
  • display: block & inline-block && inline
> ul
  > `inline-flex`
  > `inline flex` inline level box (with flex children)
  > `block flex = display: flex`  pai flex nível block (com filhos flex)

user agent styles

Chrome

Firefox

  • resource://gre-resources/
  • resource://gre-resources/ua.css
  • resource://gre-resources/forms.css
  • resource://gre-resources/html.css
  • resource://gre-resources/quirk.css

Everything is a Box

  • Content
  • Padding
  • Borders
  • Margins
  • The Standard CSS Box Model
  • The Alternate Box Model (box sizing: border-box, box-sizing: content)

https://codepen.io/onlurking/pen/QWvYJaX


Float In & Out Flow

  • position absolute
  • position relative
  • float: left;

https://codepen.io/onlurking/pen/vYmbvOQ


Stacking Content

Z-Index

https://codepen.io/onlurking/pen/poPGqbE


Position: Fixed & Sticky

https://codepen.io/onlurking/pen/BaRMvWy

Resources

@nmapv
Copy link

nmapv commented Aug 19, 2021

(8(|)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment