Introduction to the visual formatting model
March 15th, 2016
The visual formatting model explains how browsers process elements and their relative positions within a document tree for
CSS Visual Formatting Model
What is a containing block?
March 15th, 2016
The positions and size of an element is almost always calculated relative to a rectang...
Box generation and display property
March 15th, 2016
There are two main ways of elements appearance in a document tree; that are block-level elements and inline-level elements.
Block-level elements are these elements that appear formatted as...
Positioning schemes
March 15th, 2016
A CSS box, inside a document tree, may be positioned or laid out in one of the three possible sc...
Normal flow and relative positioning
March 15th, 2016
In the normal flow, boxes participate in the layout formatting context. The block boxes...
Floating elements
March 15th, 2016
A floating box is a box that is shifted to the left or right from the current flow line.
By using the float property, content may be allowed to flow along the floate...
Absolute positioning
March 15th, 2016
The absolutely positioned elements offset a box in respect to its containing block....
Relationship between display, position and float properties
March 15th, 2016
The relationship and interaction between these three properties that control the box generation...
Elements stacked and z-index
March 15th, 2016
With the CSS there is a possibility of stacking multiple boxes (elements) on top of each other to achieve a certain visual effect or perhaps a functional one, for instance due an
Content's width
March 15th, 2016
The property width specifies the width of the boxes. This property does not apply to
