Thursday, February 18, 2016

We're going to continue with Tuesday's example.

Logistics

Let's talk about the box model.

HTML pages are laid out in boxes. The main boxes are the block elements: div, p, and a number of others.

Show off the browser tilt — we can see the boxes.

CSS is (primarily) concerned with a few things:

There are other things we can do too.

Boxes have a few properties that control their size and dimensions:

Boxes also have a border and content.

The box sizing model: the content fills height and width. Outside the content, there is padding, then the border, then the margin.

Each of these properties is a dimension: a length.

Physical measurement distances (in, pt, mm, etc.) are fuzzy. Pixels are not actual device pixels, but are CSS pixels.

We can explicitly size a box with height, width, etc.

We can also use max-height and max-width to allow things to adjust within constraints.

Example: max out the page at 5.5 inches wide:

.shell {
    max-width: 5.5in;
    margin-left: auto;
    margin-right: auto;
}

The auto setting for the left and right margins tells the browser to split the distance evenly between them.

Watch the resize (with Firefox resize mode)

Suppose we want to off-center — we can put a padding-right: 1in, and it'll be pushed left!

Why?

Now what does that do on a resize?

Oops, that's kinda ugly. How to fix?

We want the padding to go away on small screens.

CSS lets us say things are only used on certain screen sizes, etc.

@media screen and (min-width: 768px) {
    .shell {
        padding-right: 1in;
    }
}

Principle: Design the page for mobile. Use media rules to layer the desktop styles on top.

How the boxes flow around the screen is decided, first, by whether elements are block or inline.

Inline elements flow left to right (in LTR languages), and are allowed to flow onto multiple lines.

Block elements stack on top of each other, top to bottom, within their containing block.

Exception: a box can float!