Basic CSS Rendering Features for HTML
CSS Rendering for HTML – Part 1
Foreword: In this part of the series, I talk about the basic CSS rendering features for HTML elements.
By: Chrysanthus Date Published: 25 Dec 2015
Introduction
Pre-Knowledge
At the bottom of this page you will find the different series you should have read before coming here, in order to understand this one.
The Viewport
Assume that you have a web page that occupies your entire screen. The area of the web page below the browser bars and above the operating system taskbar, is the viewport.
Canvas
Assume that you have a web page that fills the whole screen, and the page does not have scrollbars. Assume that you restore the web page, reducing its size and it develops scrollbars. The original area of the web page can be considered as the canvas. As you scroll the reduced web page, you bring into view parts of the canvas that are not currently displayed.
Containing Block
A containing block is an HTML rectangular box that can have other rectangular boxes. An HTML element is fundamentally displayed in a rectangular box. An example of containing block is the div element.
Box Generation
A block container box is typically a block-level box, e.g. the paragraph element. Note all block level boxes are block container boxes. For example, the table cell is a block container box and not a block-level box. The table cell cannot exist independently, like the paragraph element (everything being equal).
A container box occupies the width of its containing block, everything being equal (initially).
Anonymous Block-level Box: Consider the following code:
<div>
Some text
<P>More text</P>
</div>
The whole line of “Some Text” acquires an anonymous block-level box. Anonymous means, no name. The anonymous box is made block level and not inline level, for easy formatting, because it is at the same level in the DOM tree as the block-level p element.
An inline box does not form a new containing box. An inline box would fit into a line of text (possibly increasing the height of the line). An inline-level box is not really an inline box. A table element for example, can be converted into an inline element. The table becomes an inline-level box and not really an inline box.
Anonymous Inline Box: Consider the following code:
<p>Some <em>emphasized</em>text</p>
Before <em>emphasized</em> was inserted, there was one inline box with “Some text” generated by the p element. The inline em element generated its inline box and was inserted in the p element. This caused the p element to regenerate two anonymous inline boxes: one for “Some ” and another for “text”. The result is three boxes.
In a containing block, the web page displays elements one after another in a line. When the line is full, it goes to the next line below and continues to display more elements. Now if any of the elements is a block-level element, it occupies all the width of the containing element; the rest of the elements should continue in the next line below.
Floating
Assume that you have a line with inline elements that are not necessarily text boxes. If you float left, the inline element of the middle of the line, it will go right to the left end of the line, displacing other elements. If any element had already been floated in the line, then it will displace elements and become the second element of the line. Opposite effect takes place, if it was floated right (moving to the right end or just before the element at the right end).
Assume that you have a block level element in a containing block and the width of the block level element is less than the width of the containing block. This block level element can be floated to the left of its containing block. If that is done, lines of text or other inline elements can appear on the right and below the floated element. The opposite effect applies to floating right.
The floated element is not of the normal flow and it is not really part of the line in which it may be seen.
Imagine that you have a div element with three paragraphs. The second paragraph in the middle can be removed from the containing block to form its own containing block, where it will have its own children boxes in normal flow. In the div element the remaining two paragraphs will be placed next to one another. Absolute positioning is where a box is removed from its containing block to form a new containing block. This new containing block can be in front of its former containing block and so covering parts of its former containing block. You can still remove another box from the former containing box to be in front of the first new containing block and so the second new containing block would cover parts of the first new containing block.
Visual Effects
A box (element) has the content area. This area is normally surrounded by the padding rectangular strip, then the border rectangular strip and then the margin rectangular strip. Generally, the content of a block-level box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content becomes partly or entirely outside of the box. Whenever overflow occurs, the 'overflow' property can be used to specify whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.
That is it for this part of the series. The parts that follow give the details and related properties for the above features.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
NEXT