[CSS] Web Page Rendering

Do you really know how's your web page is rendered or step to render it?

 

In this post, we will look around the steps especially with CSS view!

 

1. The Visual Formatting Model

  1. Dimensions Boxes: the box model
  2. Box Type: inline, block and inline-block
  3. Positioning Scheme: floats and positioning
  4. Stacking Context: 
  5. Other elements in the render tree

1) Box model

This is example of how to calculate the width

2) Box Type: Inline, Block-Level, and Inline-block

 

3) Positioning Scheme: Normal Flow, Absolute Positioning, and Floats

4) Stacking Context

 

 

Leave a Comment

ko_KRKorean