Skip to content

03_CSS_Advanced.md

Latest commit

 

History

History
72 lines (40 loc) · 982 Bytes

03_CSS_Advanced.md

File metadata and controls

72 lines (40 loc) · 982 Bytes

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;