Every HTML element is a rectangular box with 4 layers:

┌─────────────────────────────────┐
│           MARGIN                │
│  ┌───────────────────────────┐  │
│  │        BORDER             │  │
│  │  ┌─────────────────────┐  │  │
│  │  │      PADDING        │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   CONTENT     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

/* Default (content-box): */
/* width = content width only */
/* Total width = width + padding + border + margin */

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
/* Total width = 200 + 40 + 10 + 20 = 270px */

/* border-box (recommended): */
/* width INCLUDES padding and border */
* {
  box-sizing: border-box;
}
/* Now total width = 200px (padding + border inside) */

/* Always use border-box — it is more intuitive */

/* static (default) */
/* Normal document flow. top/left/right/bottom have no effect */

/* relative */
/* Positioned relative to its NORMAL position */
/* Still takes up space in document flow */
.box { position: relative; top: 10px; left: 20px; }

/* absolute */
/* Positioned relative to nearest positioned ancestor */
/* Removed from document flow */
.box { position: absolute; top: 0; right: 0; }

/* fixed */
/* Positioned relative to the VIEWPORT */
/* Stays in place when scrolling */
.navbar { position: fixed; top: 0; width: 100%; }

/* sticky */
/* Hybrid of relative and fixed */
/* Relative until scroll threshold, then fixed */
.header { position: sticky; top: 0; }

/* Key interview question: */
/* "What is the difference between absolute and fixed?" */
/* absolute = relative to positioned ancestor */
/* fixed = relative to viewport (ignores scroll) */

/* Specificity = weight system for CSS rules */
/* Format: (inline, IDs, classes, elements) */

/* Element selector: (0,0,0,1) */
p { color: blue; }

/* Class selector: (0,0,1,0) */
.text { color: green; }

/* ID selector: (0,1,0,0) */
#title { color: red; }

/* Inline style: (1,0,0,0) */
<p style="color: orange">

/* !important — overrides everything (avoid using) */
p { color: purple !important; }

/* Specificity calculation: */
#nav .menu li a { }     /* (0,1,1,2) */
.sidebar .link { }      /* (0,0,2,0) */
#nav wins because ID > classes

/* Specificity order (lowest to highest): */
/* element < class < ID < inline < !important */

/* Interview tip: if two rules have same specificity, */
/* the LAST one in the stylesheet wins */

/* display: none */
/* Element is completely removed from layout */
/* Takes up NO space, not accessible */
.hidden { display: none; }

/* visibility: hidden */
/* Element is invisible but STILL takes up space */
/* Layout is preserved, just not visible */
.invisible { visibility: hidden; }

/* opacity: 0 */
/* Element is transparent but still interactive */
/* Takes up space, can be clicked */
.transparent { opacity: 0; }

/* When to use which: */
/* display: none → toggle elements (modals, menus) */
/* visibility: hidden → hide but keep layout space */
/* opacity: 0 → fade animations */

/* Method 1: Flexbox (recommended) */
.parent {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  height: 100vh;
}

/* Method 2: Grid */
.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}

/* Method 3: Absolute + Transform */
.parent { position: relative; height: 100vh; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Method 4: Margin auto (horizontal only) */
.child {
  width: 200px;
  margin: 0 auto;
}

/* Know at least 3 methods for the interview */

/* Container properties: */
.container {
  display: flex;
  flex-direction: row;       /* row | column | row-reverse */
  justify-content: center;   /* main axis alignment */
    /* flex-start | flex-end | center | space-between 
       | space-around | space-evenly */
  align-items: center;       /* cross axis alignment */
    /* flex-start | flex-end | center | stretch | baseline */
  flex-wrap: wrap;           /* wrap | nowrap | wrap-reverse */
  gap: 16px;                 /* space between items */
}

/* Item properties: */
.item {
  flex-grow: 1;    /* how much item grows (0 = don't grow) */
  flex-shrink: 1;  /* how much item shrinks */
  flex-basis: 200px; /* initial size before grow/shrink */
  /* Shorthand: flex: 1 1 200px; (grow shrink basis) */
  align-self: flex-end; /* override align-items for this item */
  order: 2;        /* change visual order */
}

/* Common patterns: */
/* Equal width columns: flex: 1 on each child */
/* Sticky footer: flex-grow: 1 on main content */
/* Navbar: justify-content: space-between */

/* Flexbox = 1-dimensional (row OR column) */
/* Best for: navbars, card rows, centering, alignment */

/* Grid = 2-dimensional (rows AND columns) */
/* Best for: page layouts, dashboards, complex grids */

/* Grid example: */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Rule of thumb: */
/* Flexbox for components, Grid for page layout */
/* They work great together */

/* 1. Viewport meta tag (required) */
<meta name="viewport" content="width=device-width, 
  initial-scale=1.0">

/* 2. Media queries */
/* Mobile first approach (recommended): */
.container { padding: 16px; }

@media (min-width: 768px) {  /* tablet */
  .container { padding: 32px; max-width: 720px; }
}
@media (min-width: 1024px) { /* desktop */
  .container { max-width: 960px; }
}

/* 3. Relative units */
/* Use rem/em instead of px for font sizes */
/* Use % or vw/vh for widths */
/* Use max-width instead of fixed width */

/* 4. Flexible images */
img { max-width: 100%; height: auto; }

/* 5. CSS Grid/Flexbox for layout */
/* They are inherently responsive */

/* Common breakpoints: */
/* 480px (mobile), 768px (tablet), 1024px (desktop) */

/* Pseudo-classes — state of an element (single colon) */
a:hover { color: red; }        /* mouse over */
a:active { color: blue; }      /* being clicked */
a:visited { color: purple; }   /* already visited */
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; } /* even rows */

/* Pseudo-elements — part of an element (double colon) */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
.tooltip::before { content: "ℹ️ "; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Key difference: */
/* Pseudo-class = state (:hover, :focus, :nth-child) */
/* Pseudo-element = part (::before, ::after, ::first-line) */