Chapter 2Layout Techniques

In this chapter, I'm going to introduce you to some layout techniques. You’ll get hands-on experience with these when we implement some of them into the skeleton we built for our CSS in Chapter 1.

Before that, there are some additional fundamental concepts that we didn’t cover in Chapter 1 that you’ll get to know.

The Box Model

The box model refers to the (usually) invisible rectangular area that is created for each HTML element. This area has four basic components, and it’s much easier to explain using a diagram, so take a look at Figure 2.1:

A graphic representation of the box model

Figure 2.1. A graphic representation of the box model

The box model components ...

Get Jump Start CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.