Overview of the browser rendering process, and all the CSS properties that define how our pages will look.

1. The fundamentals
of the browser
rendering - part 1
By Barak Drechsler

2. How css feels like...

3. How css
should feel...

4. Web
rendering
flow
1. Process HTML markup and build the DOM
tree.
2. Process CSS markup and build the CSSOM
tree.
3. Combine the DOM and CSSOM into a render
tree.
4. Run layout on the render tree to compute
geometry of each node.
5. Paint the individual nodes to the screen.

6. The web
building
blocks are
boxes
The CSS box model is the foundation of layout
on the Web — each element is represented as a
rectangular box, with the box's content,
padding, border, and margin built up around
one another like the layers of an onion.
As a browser renders a web page layout, it
works out what styles are applied to the content
of each box, how big the surrounding onion
layers are, and where the boxes sit in relation to
one another.

7. The Box Model
(content-box)

8. The Box Model
(border-box)

9. Play Time - Box Models
https://plnkr.co/edit/XNYbkiuXiS
H49haIhdCv?p=preview

10. Quick recap for the box
properties
Overflow: defaults to visible, requires the
box to have explicit height, or percentage to
be calculated by parent element height.
Height: isn’t inherited! Any div in the way
can interfere with it children heights
Border, padding, margin, are
straightforward...

11. Play Time - Height & Overflow
https://plnkr.co/edit/23kJgu8u1A
ssnLlHVt27?p=preview

12. Boxes types...
Block
Inline
Inline-block
none
(table, flex, grid)

13. Block
Block level elements do not sit inline, but break past them. If no width is set, will expand naturally
to fill its parent container.
Can have margins and/or padding.
If no height is set, will expand naturally to fit its child elements (assuming they are not floated or
positioned). So, for a block element, it’s not necessary to give it a set width or to give it a width of
100%.
Ignores the vertical-align property.

14. Inline
Default value for elements. Think of elements like span, b or em
Will ignore top and bottom margin/padding settings, but will apply left and right margin/padding.
Only moves horizontally, not vertically.
Is subject to vertical-align property.
Will ignore width and height properties.
If floated left or right, will automatically become a block-level element, subject to all block
characteristics.

15. Inline Block
Very similar to inline to its parents in that it will set inline with the natural flow of text.
Very similar to block to its children in that it can have a width and height and its content can
move vertically.
Think of a display:block element that has been rendered (or converted to an image) and then
placed in the document inline
Margin and paddings work properly.
Width and height will be respected.

16. Play Time - inline, block, inline-
block
https://codepen.io/barakdr/pen/
GNrBRg

17. Summary
1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout =>
paint.
2. Each element is box.
3. It height is defined by it box-model, either (content-box or border-box).
4. We have a different types of boxes which affect element behaviour (inline, block, inline-
block, flex, none)

18. The road ahead...
We now have to see, how can we affect how elements are being put together.
The ways to manipulate browser layout:
Floats
Positioning - next session
CSS tables
Flexbox
Grid

19. Float
The float CSS property specifies that an element should be taken from the normal flow and
placed along the left or right side of its container, where text and inline elements will wrap
around it.
A floating element is one where the computed value of float is not none.
(MDN)

20. Play Time - floats
https://plnkr.co/edit/Bz4hS2E9e
mkbr3fvts16?p=preview

21. Float - summary
1. When an element is floated it is taken out of the normal flow of the document. It is shifted
to the left or right until it touches the edge of its containing box or another floated element.
2. Float elements must be given explicit width, otherwise unexpected behavior could occur.
3. Non-positioned, non-floated, block-level elements act as if the floated element is not there.
4. To make parent of floats take it height, we must clear the floats, a trick could be adding
overflow: auto.
5. Bootstrap grid system is float based.

22. Questions?