Layout Techniques + Specificity + Box Model
Lectures 05 • 40 slides
Narration
Lecture 05 Slide 1: Layout Techniques + Specificity/Box Model
Review of Last Time (Introduction to CSS3 + Pseudo-elements)
- New CSS3 features (rgba, gradients, rounded corners)
- Pseudo-classes (:hover, :nth-child, :focus, etc.)
- Pseudo-elements (::before, ::after)
- Custom properties (CSS variables)
Today's Theme
mindmap
root((Lecture 05))
Part1[Layout Techniques]
Flexbox[Flexbox]
One-dimensional layout
Flex items
Grid[CSS Grid]
Two-dimensional layout
Grid items
Part2[Specificity]
Calculation method
Selector priority
important declaration
Part3[Box Model]
margin
border
padding
content
box-sizing
Part 1: Layout Techniques
- Flexbox (One-dimensional layout)
- CSS Grid (Two-dimensional layout)
Part 2: Specificity
- How to calculate specificity
- Selector priority
- How to use !important
Part 3: Box Model
- Complete understanding of the box model
- Utilizing box-sizing
Objectives
- Be able to create layouts with Flexbox/Grid
- Understand CSS priority and write predictable styles
- Be able to properly use the box model
1/40