Box Sizing in CSS Flexbox

1. Box Sizing

Every HTML element on a web page is a rectangular box.

By default in the CSS box model, the

width

and

height

you set to an element are applied only to the element's content.

2. The box-sizing Property

The

box-sizing

CSS property sets how the total

width

and

height

of an element are calculated.

Box-sizing Property has the following values:

• content-box
  (default)
• border-box

2.1 Content Box

The

width

and

height

properties include the content, but they do not include the

padding

,

border

, or

margin

.

2.2 Border Box

The

width

and

height

properties include the content,

padding

, and

border

, but they do not include the

margin

.

• Bootstrap uses 
  box-sizing: border-box;
   for all the HTML Elements.
• It's better to use 
  box-sizing: border-box;
   while developing layouts.

3. Universal Selector (*)

Selects all the HTML elements within the document.

Syntax :

* { property1: value1; property2: value2; }