Making Sense of the CSS Box Model

Introduction

• Making sense of the CSS Box Model

1. Appetizer: The Web Is Made of Boxes

• Displaying information through the web
• The web is made of boxes
• Designing with boxes

2. Entrée: The Origin of the Box in Typography

• Understanding the basics of type
• Change the type, change the box
• Text flow in the box

3. Main Course: Understanding the Box Model

• What is the CSS Box Model?
• Changing the contents within the box
• Understanding the display porperty
• Sidebar: Images are inline elements
• Position is everything
• Floating and clearing content
• Using the clearfix
• Pseudo elements: Making the browser hallucinate

4. Dessert: The Brave New World of Layouts

• Modern layout modules
• Flex: Content-based layouts
• Flex in depth
• Grid: Layout-based layouts
• Grid in depth

5. Nightcap

• Shapes
• Going further with CSS and web standards