CSS Visual Formatting Model

face rule

Visual Formatting Model usually explains how to process elements in the document tree for visual media such as computer screens.

CSS Visual Formatting ModelThe CSS visual formatting model is an algorithm used to process visual media documents. In the visual formatting model, each element in the document tree will be processed according toBox Model

Generate zero or more boxes.

• The layout of these boxes depends on the following factors:

• Box Size.

• The type of the element (block or inline).Positioning Scheme (Normal Flow,FloatingandAbsolute Positioning

• )

• The relationships between elements in the document tree.

The document tree is the hierarchy of elements encoded in the source document. Each element in the document tree has only one parent element, except for the root element.

Types of Boxes Generated in CSS

Each element displayed on the web page generates a rectangular box. The following sections describe the types of boxes that elements may generate.

Block-level elements and block boxesBlock-level elements are those elements that are visually formatted as blocks (i.e., occupy the full available width) and have line breaks before and after the element. For example, paragraph elements (<p>such as headings (1<h - such as headings (6<h>such as separators (such as div (

Generally, block-level elements can contain inline elements and other block-level elements.

Inline-level elements and inline boxes

Inline-level elements are those elements that do not constitute a new content block in the source document; content is distributed line by line. For example, paragraph elements (<em>such as span (<span>such as strong elements (<strong>such as emphasized text within parentheses, etc.

Inline elements usually can only contain text and other inline elements.

You can use the CSS display property to change the display way of elements on the web page. You will learnIn the next chapterUnderstand the display property.