Frontend Fundamentals

Box Model

Everything is a box

Gasp! You heard that right! The box model is the building block of every website. Everything fits in a box, and the box model describes how the size of an element is calculated, including its content, padding, border, and margin.

Need proof? Try this out on your browser’s console. Use Ctrl + Shift + J to open it and write the following code:

const allElements = document.querySelectorAll("*");
allElements.forEach((el) => (el.style.border = "2px solid green"));

Box Size

The size of a box can be Intrinsic or Restricted. For intrinsic sizing, the content of the box is used to determine its size. Restricted sizing indicates that the box’s size is governed by a set of rules like an explicit width or height set by CSS or constraints from parent elements.

Box Type

Block: Takes 100% of the parent container width by default. The height of the content is intrinsic, but you can add some padding and margin for vertical room.

Inline: First catch - this type of box does not respond to standard width and height properties. Instead the height is either determined by the elements intrinsic content height, OR the line-height property. This type of box also does not react to vertical margins. Its typically used for boxes that need to flow like text.

Anonymous: The odd sheep - this type is added by the browser when you goof up and forget to wrap text with an HTML element. Not super important.

Formatting Context

A formatting context (block, inline, table, flex, grid) defines how child elements are laid out and interact with each other. They offer:

• Isolation: elements within a context are shielded from the rules of external contexts.
• Scalability: Introducing a new ruleset for elements is as simple as creating a new context.
• Predictability: When you understand the context, the placement of elements is easy to understand

Positioning System

To Normal Flow or To Not

CSS positioning determines how elements are placed in the document flow, using static, relative, absolute, fixed, and sticky positioning.

Static positioning is applied by default and it makes elements positioned according to normal flow. Relative positioning places elements according to normal flow, but a new stacking context is created which isolates elements from the effects of neighboring elements in normal flow. This means you can apply an offset and the element will happily bump into its neighbors. Absolute positioning removes elements from normal flow and create a new stacking context.

Why is this important?

The importance of these two types of positions - relative & absolute - lies in their ability to remove items from the normal flow

If we use positioning wise, we can achieve:

• Isolation - modifications made to elements positioned in this way will not affect other elements within the normal flow
• Performance optimization - key prerequisite for optimizing and minimizing updates to the DOM tree

Stacking Context

Stacking contexts control the z‑order of positioned elements, created by properties like z-index, opacity, transform, etc.

Browser Rendering Cycle

The browser rendering cycle consists of parsing HTML/CSS, constructing the DOM and CSSOM, creating the render tree, layout, paint, and compositing.

GPU Acceleration

GPU acceleration offloads painting and compositing of layers to the graphics processor, improving performance for transforms, opacity, and animations.

Reflow

Reflow (layout) occurs when changes to the DOM or CSS require the browser to recalculate element positions and sizes. For performance optimization, you want to minimize reflow as much as possible.

Composition Layers

During compositing, the browser separates painted elements into layers that can be independently rasterized and transformed.