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.

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