Box Model

When a browser renders an HTML file, it puts each block element in a box, which allows us to change the size , the border, and the spacing within (and without) of the box. This is known as the box model.

Each box has the following property we can set: the dimension of the content area (height and width), the padding, the border, and the margin.

Layout determines the relative position of the elements/boxes on a page. The default layout (document/normal flow) simply stack the block elements and use a "flow layout" to position the children elements in a parent element. This is the default way to determine the positions of the elements.

There are three methods to change the default position of an element: aligning, floating, and positioning. To relocate an element to a desired position, we should try to use alignment first because it is the simplest method and try using positioning last as it most obtrusive.

size

align

To horizontally align content in a block element we can set the text-align property for the block element. The vertical alignment of an inline element within its containing element can be changed by setting the vertical-align property for the inline element. The inline element should be aligned vertically with respect to other content on the same line within the same containing element.

Block elements can be center on page by setting their width property and set their left and right margins to "auto". A block with its width set can be pushed to the left or to the right by making it float.

spacing

border

background

background

position

The CSS positioning properties allows us to set an element with offsets relative to a reference point, which differentiates the four positioning methods.

static: default position
absolute: relative to the containing element, which must have the position property set to a non-default value ((example1 example2)
relative: make the absolutely positioned children elements relative to this element (example)
fixed: relative to the browser window (example)

The offsets can be left, right, top, and bottom.

Page Layout

You can use the float property to take an element out of the normal layout (flow ) and push it either to the left or the right. The element's vertical position is the same as the vertical position it would be in the normal layout. If a float element is above some text, the browser will wrap the text around the floating element. A floating element normally have its width property set because otherwise it would take the available horizontal space appearing not floating.

A floating child element stays inside its parent element, i.e. the enclosing relationship, which is physical, doesn't change. A floating child element may hang out of its parent's box because it doesn't take into account the floating children elements. The overflow property determines what happens when the content overflows an element's box. The clear property, when set on an element, will push the element down to avoid ("stay clear") of floating elements to the left or to the right.

To create multi-column layout we can use float and clear elements.

float
clear

Here is an example.

Alignment v.s. Floating v.s. Positioning

if possible, lay out an element by aligning its content
- horizontal alignment: text-align (aligns the content of a block element with this property)
- vertical alignment: vertical-align (aligns an inline element with this property within its containing element)
if alignment won't work, try floating the element
if floating won't work, try positioning the element
- absolute/fixed positionings are a last resort and should not be overused