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

This box will change your life

whitep4nth3r
September 01, 2021
0
900

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.

whitep4nth3r

September 01, 2021
Tweet

More Decks by whitep4nth3r

See All by whitep4nth3r
We actually need more JavaScript frameworks
whitep4nth3r
0
46
We're all living on it. But what exactly is The Edge?
whitep4nth3r
0
44
Contentful's Fast Forward 2021 Day 2 Keynote
whitep4nth3r
0
49
How to prevent the collapse of society by building an accessible web
whitep4nth3r
0
530

Featured

See All Featured
Infographics Made Easy
chrislema
236
17k
Why You Should Never Use an ORM
jnunemaker
PRO
49
8.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
15
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
16
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
A designer walks into a library…
pauljervisheath
199
17k
Large-scale JavaScript Application Architecture
addyosmani
500
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
3.7k
Agile that works and the tools we love
rasmusluckow
322
20k
Clear Off the Table
cherdarchuk
81
300k
Product Roadmaps are Hard
iamctodd
39
8.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
33
2k

Transcript

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

    View Slide

  2. @whitep4nth3r
    https://whitep4nth3r.com
    HI FRIENDS,
    I’M SALMA.
    I help developers build stuff,
    learn things, and love what they do.

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. WHAT IS
    CSS?

    View Slide

  16. Cascading Style Sheet
    CSS

    View Slide

  17. Cascade
    CSS

    View Slide

  18. Specificity
    CSS
    Cascade

    View Slide

  19. CSS
    Specificity
    Cascade
    Inheritance

    View Slide

  20. CSS
    Specificity
    Cascade
    Inheritance
    An algorithm that defines how to combine CSS property values
    from different sources.

    View Slide

  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.

    View Slide

  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.

    View Slide

  23. CSS
    Inheritance
    Default > parent > child.

    View Slide

  24. CSS
    YOU

    View Slide

  25. YOU
    CSS

    View Slide

  26. //* HTML **/

    <

    View Slide

  27. //* HTML **/

    <
    //* CSS **/
    .container {
    max-width: 640px;
    margin: auto;
    border: 10px solid red;
    }

    View Slide

  28. //* HTML **/

    <
    //* CSS **/
    .container {
    max-width: 640px;
    margin: auto;
    border: 10px solid red;
    }

    View Slide

  29. //* HTML **/

    <
    //* CSS **/
    .container {
    max-width: 640px;
    margin: auto;
    border: 10px solid red;
    }

    View Slide

  30. //* HTML **/

    <
    //* CSS **/
    .container {
    max-width: 640px;
    margin: auto;
    border: 10px solid red;
    }

    View Slide

  31. //* HTML **/

    <
    <

    View Slide

  32. //* HTML **/

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

    View Slide

  33. //* HTML **/

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

    View Slide

  34. //* HTML **/

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

    View Slide

  35. //* HTML **/

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

    View Slide

  36. //* HTML **/


    This is a box.<
    <
    <

    View Slide

  37. //* HTML **/


    This is a box.<
    <
    <

    View Slide

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

    View Slide

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

    View Slide

  40. View Slide

  41. View Slide

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

    View Slide

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

    View Slide

  44. The CSS Box Model

    View Slide

  45. The CSS Box Model
    will change your life.

    View Slide

  46. WHAT IS THE
    CSS BOX MODEL?

    View Slide

  47. DESIGN & LAYOUT
    CSS BOX MODEL

    View Slide

  48. View Slide

  49. CONTENT
    CSS BOX MODEL

    View Slide

  50. PADDING
    CONTENT
    CSS BOX MODEL

    View Slide

  51. BORDER
    PADDING
    CONTENT
    CSS BOX MODEL

    View Slide

  52. MARGIN
    BORDER
    PADDING
    CONTENT
    CSS BOX MODEL

    View Slide

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

    View Slide

  54. https://whitep4nth3r.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. https://whitep4nth3r.com

    View Slide

  61. CSS BOX MODEL

    View Slide

  62. CSS BOX MODEL

    View Slide

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

    View Slide

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

    View Slide

  65. WHAT IS
    BOX-SIZING?

    View Slide

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

    View Slide

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

    View Slide

  68. BOX-SIZING

    View Slide

  69. BOX-SIZING

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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%

    View Slide

  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

    View Slide

  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%;
    }

    View Slide

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

    View Slide

  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%

    View Slide

  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%

    View Slide

  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%

    View Slide

  83. THE PROBLEM WITH
    CSS RESETS

    View Slide

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

    View Slide

  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

    View Slide

  86. undohtml.css
    CSS RESETS

    View Slide

  87. undohtml.css
    CSS RESETS
    HTML5 Reset

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. CSS RESETS
    Understand the behaviour
    of your boxes.

    View Slide

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

    View Slide

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

    View Slide

  99. CSS RESETS
    Know what you want
    to achieve.

    View Slide

  100. UNDERSTANDING
    BROWSER DEFAULTS

    View Slide

  101. BROWSER
    DEFAULTS
    YOU

    View Slide

  102. YOU
    BROWSER
    DEFAULTS

    View Slide

  103. User Agent Style Sheet
    BROWSER DEFAULTS

    View Slide

  104. BROWSER DEFAULTS: CHROMIUM

    View Slide

  105. BROWSER DEFAULTS: FIREFOX

    View Slide

  106. BROWSER DEFAULTS: FIREFOX

    View Slide

  107. BROWSER DEFAULTS: FIREFOX

    View Slide

  108. BROWSER DEFAULTS: SAFARI

    View Slide

  109. BROWSER DEFAULTS
    //* HTML **/


    This is a box.<
    <
    <

    View Slide

  110. BROWSER DEFAULTS
    //* HTML **/


    This is a box.<
    <
    <

    View Slide

  111. BROWSER DEFAULTS
    //* HTML **/


    This is a box.<
    <
    <
    //* HTML **/


    This is a box.<
    <
    <

    View Slide

  112. BROWSER DEFAULTS

    View Slide

  113. BROWSER DEFAULTS

    View Slide

  114. BROWSER DEFAULTS

    View Slide

  115. BROWSER DEFAULTS

    View Slide

  116. BROWSER DEFAULTS

    View Slide

  117. DIFFERENT TYPES
    OF BOXES

    View Slide

  118. DIFFERENT BOXES
    BLOCK

    View Slide

  119. DIFFERENT BOXES
    BLOCK
    INLINE

    View Slide

  120. DIFFERENT BOXES
    BLOCK
    INLINE
    INLINE-*

    View Slide

  121. DIFFERENT BOXES
    BLOCK

    View Slide

  122. DIFFERENT BOXES
    BLOCK
    BLOCK

    View Slide

  123. DIFFERENT BOXES
    BLOCK
    BLOCK
    BLOCK

    View Slide

  124. DIFFERENT BOXES
    BLOCK
    BLOCK
    BLOCK

    View Slide

  125. DIFFERENT BOXES
    INLINE

    View Slide

  126. DIFFERENT BOXES
    INLINE INLINE

    View Slide

  127. DIFFERENT BOXES
    INLINE
    INLINE INLINE

    View Slide

  128. DIFFERENT BOXES
    INLINE
    INLINE INLINE

    View Slide

  129. DIFFERENT BOXES
    INLINE
    INLINE INLINE
    INLINE
    INLINE INLINE

    View Slide

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

    View Slide

  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

    View Slide

  132. DIFFERENT BOXES

    View Slide

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

    View Slide

  134. Always declare display.
    BROWSER DEFAULTS

    View Slide

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

    View Slide

  136. WRAPPING
    UP

    View Slide

  137. CSS BOX MODEL

    View Slide

  138. CSS BOX MODEL

    View Slide

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

    View Slide

  140. Content + Padding + Border
    THIS BOX WILL CHANGE YOUR LIFE
    Think inside the box.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  146. The CSS Box Model
    will change your life.
    THIS BOX WILL CHANGE YOUR LIFE

    View Slide

  147. 👋 COME AND SAY HI!

    View Slide

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

    View Slide

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

    View Slide