CSS3 Visual Formatting Model
The CSS3 visual formatting model is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.
The layout of these boxes is depends on the following factors:
- box dimensions.
- type of the element (block or inline).
- positioning scheme (normal flow, float, and absolute positioning).
- relationships between elements in the document tree.
- external information e.g. view-port size, built-in dimensions of images, etc.
Type of Boxes Generated in CSS3
Every element displayed on a web page generates a rectangular box. The following section describes the types of boxes that may be generated by an element.
Block-level Elements and Block Boxes
Block-level elements are those elements that are formatted visually as blocks (i.e. takes up the full width available), with a line break before and after the element. For example, paragraph element (<p>), headings (<h1> to <h6>), divisions (<div>) etc.
Generally, block-level elements may contain inline elements and other block-level elements. You can change how an element will be displayed on a web page using the CSS3 display property.
Leave a Reply