CSS visual formatting is a process that is responsible for processing the document tree to the visual media. It means it is liable to process the document tree for visualization on a computer screen. Each element in the document tree generates zero or more boxes according to the box model.
Some factors are there on which the layout of boxes depends –
- Relationships between elements in the document.
- Positioning scheme (normal flow, float, and absolute positioning).
- Box dimensions.
- Type of the element like – block or inline element.
- External information like – viewport size, built-in dimensions of images, etc.
Let’s understand it clearly by some examples.
If we talk about inline box construction, that can be like –
Ex –
<P>Several <EM>emphasized words</EM> appear<STRONG>in this</STRONG> sentence, dear.</P>
In an inline formatting context, atomic inline boxes cannot be split into some lines.
Ex –
<style>
span
{
display:inline; /* default value*/
}
</style>
<div style=”width:20em;”>
The text in the span <span>can be split in several
lines as it</span> is an inline box.
</div>
If it is an inline box, then the text in the span can be split into different lines.
Ex-
<style>
span
{
display:inline-block;
}
</style>
<div style=”width:20em;”>
The text in the span <span>cannot be split in several lines as it </span> is an inline-block box.
</div>
In Anonymous block boxes –
Ex –
<DIV>
Some text
<P>More text
</DIV>
But sometimes you may distribute the boxes. It depends on the width of the P.
Ex –
<!DOCTYPE HTML PUBLIC “-//awm//DTD HTML 4.01//EN”><HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type=”text/css”> EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } </STYLE> </HEAD> <BODY> <P>Several <EM>emphasized words</EM> appear here.</P> </BODY></HTML>
