CSS Advanced

Emmet Tips

• + adjacent, > child, * count

  • a+ul>li*3

  • a+ul.nav-items>li.nav-item*3

• link:css

  • Creates the link tag

• line-height

  • Vertical centering for single-line text

• display: flex

  • Composed of a container and child elements as items

Layout Tips

1. Box model

   • Think of everything as squares!

2. position: absolute;

   • Use absolute when you want to place something at the edge of something

   • Use flex when you want to place on the side

3. flex

   • Parent element (container)

     • The element with display: flex; applied

     • inline, block do not apply

   • Child elements (items)

   • main axis

     • justify-content

   • cross axis

     • align-items

       : Mainly used for vertical alignment

4. rem

   : A typical browser is 16px

5. box-sizing: border-box;

6. margin: top-bottom / left-right;