Upgrade to Pro — share decks privately, control downloads, hide ads and more …

This box will change your life

Salma Alam-Naylor
September 01, 2021
1k

This box will change your life

Is the struggle of battling with margins, paddings and layout in front end development all too familiar? Understanding the CSS box model will change your life. By exploring this powerful and fundamental concept through a series of code examples and real-world struggles, you'll feel empowered to tackle your next project with confidence. CSS doesn't have to be scary. This box will change your life.

Salma Alam-Naylor

September 01, 2021
Tweet

Transcript

  1. CSS Specificity Cascade Inheritance An algorithm that defines how to

    combine CSS property values from different sources.
  2. CSS Specificity Cascade Inheritance How browsers decide which CSS property

    values are the most relevant to an element and, therefore, will be applied. An algorithm that defines how to combine CSS property values from different sources.
  3. CSS Specificity Cascade Inheritance Default > parent > child. An

    algorithm that defines how to combine CSS property values originating from different sources. How browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
  4. //* HTML **/ <div class="container"> <</div> //* CSS **/ .container

    { max-width: 640px; margin: auto; border: 10px solid red; }
  5. //* HTML **/ <div class="container"> <</div> //* CSS **/ .container

    { max-width: 640px; margin: auto; border: 10px solid red; }
  6. //* HTML **/ <div class="container"> <</div> //* CSS **/ .container

    { max-width: 640px; margin: auto; border: 10px solid red; }
  7. //* HTML **/ <div class="container"> <</div> //* CSS **/ .container

    { max-width: 640px; margin: auto; border: 10px solid red; }
  8. //* HTML **/ <div class="container"> <div class="box"><</div> <</div> //* CSS

    **/ .box { background: yellow; border: 10px solid blue; }
  9. //* HTML **/ <div class="container"> <div class="box"><</div> <</div> //* CSS

    **/ .box { background: yellow; border: 10px solid blue; }
  10. //* HTML **/ <div class="container"> <div class="box"><</div> <</div> //* CSS

    **/ .box { background: yellow; border: 10px solid blue; }
  11. //* HTML **/ <div class="container"> <div class="box"><</div> <</div> //* CSS

    **/ .box { background: yellow; border: 10px solid blue; padding: 20px; }
  12. //* CSS **/ .box { background: yellow; border: 10px solid

    blue; padding: 20px; width: 100%; }
  13. //* CSS **/ .box { background: yellow; border: 10px solid

    blue; padding: 20px; width: 100%; }
  14. //* CSS **/ .box { background: yellow; border: 10px solid

    blue; padding: 20px; width: 100%; box-sizing: border-box; }
  15. //* CSS **/ .box { background: yellow; border: 10px solid

    blue; padding: 20px; width: 100%; box-sizing: border-box; }
  16. .box { background: yellow; border: 10px solid blue; padding: 20px;

    width: 100%; box-sizing: border-box; } CSS BOX MODEL
  17. .box { background: yellow; border: 10px solid blue; padding: 20px;

    width: 100%; box-sizing: border-box; } CSS BOX MODEL
  18. BOX-SIZING box-sizing: content-box; .box { //* No box-sizing specified **/

    background: black; color: yellow; border: 10px solid blue; padding: 20px; width: 100%; }
  19. BOX-SIZING box-sizing: content-box; .box { //* No box-sizing specified **/

    background: black; color: yellow; border: 10px solid blue; padding: 20px; width: 100%; } CALCULATED WIDTH 100%
  20. BOX-SIZING box-sizing: content-box; .box { //* No box-sizing specified **/

    background: black; color: yellow; border: 10px solid blue; padding: 20px; width: 100%; } CALCULATED WIDTH 100% + 20PX
  21. BOX-SIZING box-sizing: content-box; CALCULATED WIDTH 100% + 20PX + 10PX

    .box { //* No box-sizing specified **/ background: black; color: yellow; border: 10px solid blue; padding: 20px; width: 100%; }
  22. BOX-SIZING box-sizing: border-box; .box { box-sizing: border-box; background: yellow; color:

    black; border: 10px solid blue; padding: 20px; width: 100%; }
  23. BOX-SIZING box-sizing: border-box; .box { box-sizing: border-box; background: yellow; color:

    black; border: 10px solid blue; padding: 20px; width: 100%; } CALCULATED WIDTH 100%
  24. BOX-SIZING box-sizing: border-box; .box { box-sizing: border-box; background: yellow; color:

    black; border: 10px solid blue; padding: 20px; width: 100%; } CALCULATED WIDTH 100%
  25. BOX-SIZING box-sizing: border-box; .box { box-sizing: border-box; background: yellow; color:

    black; border: 10px solid blue; padding: 20px; width: 100%; } CALCULATED WIDTH 100%
  26. CSS RESETS A CSS reset is a set of CSS

    rules that resets the styling of all HTML elements to a consistent baseline*.
  27. A CSS reset is a set of CSS rules that

    resets the styling of all HTML elements to a consistent baseline*. CSS RESETS *probably opinionated
  28. BROWSER DEFAULTS //* HTML **/ <div class="container"> <div class="box"> <p>This

    is a box.<</p> <</div> <</div> //* HTML **/ <div class="container"> <span class="box"> <p>This is a box.<</p> <</span> <</div>
  29. Box type block inline-* inline Breaks onto a new line

    ✅ ❌ ❌ Fills horizontal space ✅ ❌ ❌ Width + height ✅ ✅ ❌ Push vertical padding + margin + borders ✅ ✅ ❌ Push horizontal padding + margin + borders ✅ ✅ ✅ DIFFERENT BOXES