CSS - Layout Mode (Visual Formatting Model)

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

layout in Css.

A layout mode is an algorithm which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes:

A layout mode is also known as:

  • box model
  • positioning schemes
  • or visual formatting context.
Block Type Name Specification For laying out
Block block layout CSS 2.1 documents
Block inline layout CSS 2.1 text
??? table layout CSS 2.1 2D data in a tabular format
All (Block, Flex) positioned layout CSS 2.1 very explicit positioning without much regard for other elements in the document
Flex flex layout more complex applications and webpages

See also: CSS - Float (box|property)

Boxes in the normal flow belong to only one formatting context (layout).

In Css, a box may be laid out according to four positioning schemes:

Box Type Desc
Block normal flow (relative positioning)
Block float
Block Absolute
Flex flex

Boxes belong to only one formatting context (one layout mode).

Advertising

3 - Documentation / Reference

web/css/layout.txt ยท Last modified: 2019/02/09 11:41 by gerardnico