Layout

Topics

1. Block Formatting Context

2. Stacking context

3. Box Model

Block Formatting Context

Describe BFC(Block Formatting Context) and how it works?

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

• the root element or something that contains it

• floats (elements where float is not 'none')

• absolutely positioned elements (elements where position is absolute or fixed)

• inline-blocks (elements with display: inline-block)

• table cells (elements with display: table-cell, which is the default for HTML table cells)

• table captions (elements with display: table-caption, which is the default for HTML table captions)

• block elements where overflow has a value other than visible

Describe Floats and how they work.

1. Float is a CSS positioning property.

If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.

2. A floated element is "invisible" to its parent

• Add the Empty Div Method

<div style="clear: both;"></div>

• The Overflow Method

setting the overflow property on a parent element. value should be auto or hidden.

• Add psueudo element to parent

clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Stacking context

Describe z-index and how stacking context is formed.

• The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis. HTML elements occupy this space in priority order based on element attributes

• position: absolute, relative, fixed generates new stacking context.

  Here is an order

Backgrounds and borders of the root element

1. Non-positioned, non-floating block elements, in the order they appear in the source code

2. Non-positioned floating elements, in the order they appear in the source code

3. Inline elements

4. Positioned elements, in the order they appear in the source code

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

What's the difference between a relative, fixed, absolute and statically positioned element?

static:

• default for every elements

• positioning does not cascade

relative:

• relative to itself

• top, right, left, bottom works on itself

• If you set z-index to it, it will be on top of all static elements.

• children which are ‘position:absolute’ are based on this element.

absolute:

• Based on root if not parents have relative.

• Removed from the flow of element

fixed:

• Fixed position is positioned to the viewport or window

Box Model

What box model is

essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

box-sizing

The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.

• content-box is the default

• When you set border-box: border-box, margin will be inside of the box model. This is useful property to add margin to elements without calculating and subtracting the width of margin from the width of content. Let's say, an element has width: 50% and margin: 20px, the layout will be collapsed because total width of the element is 50% + 20px + 20px. Thus, we need to subtract margin size from content width. Calculation of actual content can be complex so box-sizing property makes setting margin easier. We just need to add box-sizing: border-box.

Elaborate on quirks of box-model margin and padding

Explain the use of VW in CSS sizing as opposed to percentage.