January 19th, 2020

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

Your email address will not be published. Required fields are marked *

recent post

Part 3: WordPress…

Recently, I’ve been working on a proof of concept project which int...

 759 Views
Part 2: WordPress…

Uploading Files The goal of the plugin is to convert a PDF in WordPre...

 832 Views
Part 1: WordPress…

WordPress is one of the most popular content management systems on the...

 778 Views
CSS Hacks For Every Web Developer
CSS Browser-Specific Hacks

What is this? Browser hacks is an extensive list of brow...

 1132 Views
What are Operators…

Operators are symbols or keywords that tell the JavaScript engine to...

 2287 Views
CSS3 Visual Formatting…

The CSS3 visual formatting model is the algorithm that is used to pro...

 459 Views
Animatable Properties in CSS3
Animatable Properties in…

The following section contains a complete list of animatable propert...

 477 Views
Custom Permalinks in…

Do you want to create custom permalinks in WordPress for posts, page...

 434 Views
HTML5 Tag Reference

HTML5 has many new tags included and many others deprecated from the...

 449 Views
Resize and Make…

Have you ever tried resizing a image to make it larger? This usually...

 461 Views