Skip to content

Latest commit

 

History

History
61 lines (51 loc) · 2.58 KB

README.md

File metadata and controls

61 lines (51 loc) · 2.58 KB

Table of Contents

Day 02 - Git, CSS Box Model

Topics

  • CSS Box Model

    • Everything is a box
    • Boxes have 4 areas we can manipulate
      • Content
        • Height
        • Width
      • Padding
      • Border
      • Margin
    • Box-sizing

  • Block vs Inline elements

    • Block: Proud parent
    • Inline: Disrespectful teenager

  • Git Introduction

Notes

HTML Elements can generally be broken down into one of two categories: inline, and block-level.

Inline elements

Think of them as bratty teenagers.

  • They want to be near their friends:
    • They will move as close in to neighboring elements as those neighboring elements will allow.
  • They are disrespectful:
    • aka: ignoring height, width, margin-top or margin-bottom
  • For a full list of inline elements available see the MDN Documentation for inline elements
Block-level elements

Think of them as proud parents.

  • They are proud:
    • They will swell up to fill as much space (left to right) as is available
    • Even if they are not full width, they still don't allow anyone to be next to them.
  • They are very respectful:
    • aka: comply with height, width, and all margins
  • For a full list of inline elements available see the MDN Documentation for block-level elements

Assignments

  1. Ask one question on Breadcrumbs
  2. Answer one of these questions in your own words (even if it already has an answer)
  3. First three layouts from Mobile Layout 2

Resources