Pro CSS and HTML Design Patterns

CHAPTER 4Box Models

The fundamental design pattern in CSS is the Box Model. The Box Model defines how elements are rendered as boxes. There are six main types of boxes: inline, inline-block, block, table, absolute, and floated. A browser renders each element as one of these boxes. Some elements are rendered in a variation of one of these boxes, such as a list item or ble cell. For example, list-item is a block box with an inline marker automatically created by the browser, and table-cell is a block box that does not support margins.

You can use the display property to render an element as a different type of box. You can use the position:absolute or position:fixed to render any element as an absolute box. You can use the float:left or float:right ...