Save 37% off PRO during our Black Friday Sale! »

This box will change your life

Dcc5cf3b89d276443d2ce6745d7ef480?s=47 whitep4nth3r
September 01, 2021
520

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.

Dcc5cf3b89d276443d2ce6745d7ef480?s=128

whitep4nth3r

September 01, 2021
Tweet

Transcript

  1. Salma Alam-Naylor @whitep4nth3r THIS BOX WILL CHANGE YOUR LIFE.

  2. @whitep4nth3r https://whitep4nth3r.com HI FRIENDS, I’M SALMA. I help developers build

    stuff, learn things, and love what they do.
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. WHAT IS CSS?

  16. Cascading Style Sheet CSS

  17. Cascade CSS

  18. Specificity CSS Cascade

  19. CSS Specificity Cascade Inheritance

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

    combine CSS property values from different sources.
  21. 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.
  22. 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.
  23. CSS Inheritance Default > parent > child.

  24. CSS YOU

  25. YOU CSS

  26. //* HTML **/ <div class="container"> <</div>

  27. //* HTML **/ <div class="container"> <</div> //* CSS **/ .container

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

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

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

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

  32. //* HTML **/ <div class="container"> <div class="box"><</div> <</div> //* CSS

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

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

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

    **/ .box { background: yellow; border: 10px solid blue; padding: 20px; }
  36. //* HTML **/ <div class="container"> <div class="box"> <p>This is a

    box.<</p> <</div> <</div>
  37. //* HTML **/ <div class="container"> <div class="box"> <p>This is a

    box.<</p> <</div> <</div>
  38. //* CSS **/ .box { background: yellow; border: 10px solid

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

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

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

    blue; padding: 20px; width: 100%; box-sizing: border-box; }
  44. The CSS Box Model

  45. The CSS Box Model will change your life.

  46. WHAT IS THE CSS BOX MODEL?

  47. DESIGN & LAYOUT CSS BOX MODEL

  48. None
  49. CONTENT CSS BOX MODEL

  50. PADDING CONTENT CSS BOX MODEL

  51. BORDER PADDING CONTENT CSS BOX MODEL

  52. MARGIN BORDER PADDING CONTENT CSS BOX MODEL

  53. MARGIN BORDER PADDING CONTENT CSS BOX MODEL MARGIN BORDER PADDING

    CONTENT MARGIN BORDER PADDING CONTENT
  54. https://whitep4nth3r.com

  55. https://whitep4nth3r.com ← CONTENT →

  56. https://whitep4nth3r.com PADDING → ← ← CONTENT →

  57. https://whitep4nth3r.com BORDER → PADDING → ← ← CONTENT →

  58. https://whitep4nth3r.com BORDER → PADDING → ← ← MARGIN → ←

    CONTENT →
  59. https://whitep4nth3r.com BORDER → PADDING → ← ← MARGIN → ←

    CONTENT →
  60. https://whitep4nth3r.com

  61. CSS BOX MODEL

  62. CSS BOX MODEL

  63. .box { background: yellow; border: 10px solid blue; padding: 20px;

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

    width: 100%; box-sizing: border-box; } CSS BOX MODEL
  65. WHAT IS BOX-SIZING?

  66. BOX-SIZING The box-sizing property defines how the width and height

    of an element are calculated.
  67. BOX-SIZING The box-sizing property defines how the width and height

    of an element are calculated.
  68. BOX-SIZING

  69. BOX-SIZING

  70. BOX-SIZING box-sizing: border-box;

  71. BOX-SIZING box-sizing: border-box;

  72. BOX-SIZING box-sizing: border-box; box-sizing: content-box;

  73. box-sizing: content-box; BOX-SIZING

  74. box-sizing: content-box; BOX-SIZING BROW SER DEFAULT

  75. BOX-SIZING box-sizing: content-box; .box { //* No box-sizing specified **/

    background: black; color: yellow; border: 10px solid blue; padding: 20px; width: 100%; }
  76. 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%
  77. 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
  78. 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%; }
  79. BOX-SIZING box-sizing: border-box; .box { box-sizing: border-box; background: yellow; color:

    black; border: 10px solid blue; padding: 20px; width: 100%; }
  80. 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%
  81. 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%
  82. 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%
  83. THE PROBLEM WITH CSS RESETS

  84. CSS RESETS A CSS reset is a set of CSS

    rules that resets the styling of all HTML elements to a consistent baseline*.
  85. 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
  86. undohtml.css CSS RESETS

  87. undohtml.css CSS RESETS HTML5 Reset

  88. undohtml.css CSS RESETS HTML5 Reset Normalize.css

  89. undohtml.css CSS RESETS HTML5 Reset Normalize.css Sanitize.css

  90. undohtml.css CSS RESETS HTML5 Reset Normalize.css Sanitize.css MiniReset.css

  91. undohtml.css CSS RESETS HTML5 Reset Normalize.css Sanitize.css MiniReset.css Reboot

  92. CSS RESETS * { box-sizing: border-box; }

  93. CSS RESETS * { box-sizing: border-box; }

  94. * { box-sizing: border-box; } CSS RESETS ← EVERY SINGLE

    ELEMENT
  95. https://css-tricks.com/reboot-resets-reasoning/

  96. CSS RESETS Understand the behaviour of your boxes.

  97. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  98. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  99. CSS RESETS Know what you want to achieve.

  100. UNDERSTANDING BROWSER DEFAULTS

  101. BROWSER DEFAULTS YOU

  102. YOU BROWSER DEFAULTS

  103. User Agent Style Sheet BROWSER DEFAULTS

  104. BROWSER DEFAULTS: CHROMIUM

  105. BROWSER DEFAULTS: FIREFOX

  106. BROWSER DEFAULTS: FIREFOX

  107. BROWSER DEFAULTS: FIREFOX

  108. BROWSER DEFAULTS: SAFARI

  109. BROWSER DEFAULTS //* HTML **/ <div class="container"> <div class="box"> <p>This

    is a box.<</p> <</div> <</div>
  110. BROWSER DEFAULTS //* HTML **/ <div class="container"> <div class="box"> <p>This

    is a box.<</p> <</div> <</div>
  111. 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>
  112. BROWSER DEFAULTS

  113. BROWSER DEFAULTS

  114. BROWSER DEFAULTS

  115. BROWSER DEFAULTS

  116. BROWSER DEFAULTS

  117. DIFFERENT TYPES OF BOXES

  118. DIFFERENT BOXES BLOCK

  119. DIFFERENT BOXES BLOCK INLINE

  120. DIFFERENT BOXES BLOCK INLINE INLINE-*

  121. DIFFERENT BOXES BLOCK

  122. DIFFERENT BOXES BLOCK BLOCK

  123. DIFFERENT BOXES BLOCK BLOCK BLOCK

  124. DIFFERENT BOXES BLOCK BLOCK BLOCK

  125. DIFFERENT BOXES INLINE

  126. DIFFERENT BOXES INLINE INLINE

  127. DIFFERENT BOXES INLINE INLINE INLINE

  128. DIFFERENT BOXES INLINE INLINE INLINE

  129. DIFFERENT BOXES INLINE INLINE INLINE INLINE INLINE INLINE

  130. DIFFERENT BOXES INLINE-* INLINE-* INLINE-* INLINE-* INLINE-* INLINE-*

  131. 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
  132. DIFFERENT BOXES

  133. Solve all your problems with this one simple trick! BROWSER

    DEFAULTS
  134. Always declare display. BROWSER DEFAULTS

  135. Always declare display. BROWSER DEFAULTS Always declare everything.

  136. WRAPPING UP

  137. CSS BOX MODEL

  138. CSS BOX MODEL

  139. Think inside the box. THIS BOX WILL CHANGE YOUR LIFE

  140. Content + Padding + Border THIS BOX WILL CHANGE YOUR

    LIFE Think inside the box.
  141. Think outside the box. THIS BOX WILL CHANGE YOUR LIFE

  142. Margin THIS BOX WILL CHANGE YOUR LIFE Think outside the

    box.
  143. Think about the box. THIS BOX WILL CHANGE YOUR LIFE

  144. Block THIS BOX WILL CHANGE YOUR LIFE Think about the

    box.
  145. Block / Inline THIS BOX WILL CHANGE YOUR LIFE Think

    about the box.
  146. The CSS Box Model will change your life. THIS BOX

    WILL CHANGE YOUR LIFE
  147. 👋 COME AND SAY HI!

  148. BUILD STUFF, LEARN THINGS, LOVE WHAT YOU DO. @whitep4nth3r

  149. THANK YOU! @whitep4nth3r https://whitep4nth3r.com