CSS.md

CSS

Mental Models

• https://www.julian.com/blog/mental-model-examples
• https://junto.investments/mental-models/
• https://fs.blog/mental-models/

CSS Specs

• https://www.w3.org/TR/?tag=css&status=rec
• https://www.w3.org/TR/?tag=css&status=cr

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

• http://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css?order=name
• http://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css/html.css
• http://trac.webkit.org/browser/webkit/trunk/Source/WebCore/css/quirks.css

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

• https://every-layout.dev/
• https://courses.thecssworkshop.com/courses
• https://debuggingcss.com/
• https://www.manning.com/books/css-in-depth
• https://css-for-js.dev/
• https://www.smashingmagazine.com/2019/01/how-to-learn-css/

(8(|)