CSS Box Model

The CSS box model consists of four main components:

• Content
• Padding
• Border
• Margin

Two primary box model types exist:

• Standard Box Model: margin + border + padding + content
• IE Box Model: margin + content (includes border and padding)

Control box model behavior with box-sizing:

• content-box (default, standard model)
• border-box (IE model)

CSS Selector Priority

CSS features include inheritance, cascading, and priority. When multiple styles apply to an element, priority determines which style displays:

!important > inline styles > id > class/pseudo-class/attribute > tag selector > universal selector

Element Hiding Techniques

Common methods:

• display: none - Removes element from layout, occupies no space
• opacity: 0 - Makes element transparent but maintains layout space
• visibility: hidden - Hides element while preserving layout space

Additional methods:

• position: absolute (moves element off-screen)
• clip-path (clips element visually)

PX vs REM Units

PX are absolute pixel units, while REM are relative units based on the root HTML element's font size. Setting html { font-size: 62.5% } makes 1rem = 10px (based on default 16px browser font size).

<style>
  html { font-size: 62.5% }
  .container { font-size: 1rem; } /* Equals 10px */
</style>

<div class="container">Unit demonstration</div>

Reflow vs Repaint

Reflow occurs when the browser recalculates element positions and sizes. Repaint happens when visual styles change without affecting layout geometry. Adding DOM elements triggers reflow, while changing colors triggers repaint.

Horizontal and Vertical Centering

Multiple approaches exist for element centering:

Positioning with Margin

.parent {
  position: relative;
  width: 400px;
  height: 400px;
}

.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

Positioning with Transform

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Flexbox Approach

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Additional methods include Grid layout and Table layout.

CSS Inheritance

CSS properties that can inherit from parent elements:

• Font properties
• Text properties (line-height)
• Visibility
• Table layout properties
• List styles
• Page styles
• Audio styles

JavaScript Built-in Objects

Core JavaScript objects include:

• String, Boolean, Number, Array, Object, Function
• Math (abs, sqrt, max, min)
• Date (new Date(), getYear())
• RegExp

Array Manipulation Methods

Common array methods:

push(), pop(), sort(), splice(), unshift(), shift(), 
reverse(), concat(), join(), map(), filter(), every(), 
some(), reduce(), isArray(), findIndex()

Methods that mutate original arrays:

splice, push, pop, unshift, shift, sort, reverse

JavaScript Data Type Detection

Four primary methods for type checking:

1. typeof - Basic types only
2. instanceof - Reference types only
3. constructor - Most types (with limitations)
4. Object.prototype.toString.call() - Most reliable approach

const typeCheck = Object.prototype.toString;
console.log(typeCheck.call(2));        // [object Number]
console.log(typeCheck.call(true));     // [object Boolean]
console.log(typeCheck.call('text'));   // [object String]
console.log(typeCheck.call([]));       // [object Array]
console.log(typeCheck.call({}));       // [object Object]

Closures in JavaScript

Closures occur when inner functions access outer function variables after the outer function has executed:

function outerFunc(param) {
  return function() {
    console.log(param);
  }
}

const closureExample = outerFunc("data");
closureExample(); // Outputs: "data"

Closures enable variable reuse without polluting global scope but can cause memory issues if overused.

Prototypal Inheritance

JavaScript uses prototype-based inheritance where objects inherit properties and methods from their prototype:

function Person() {
  this.speak = function() { console.log('Speaking'); }
}

Person.prototype.view = function() { console.log('Viewing'); }

const person1 = new Person();
const person2 = new Person();

person1.view(); // Outputs: "Viewing"
person2.view(); // Outputs: "Viewing"

console.log(person1.__proto__ === Person.prototype); // true

The prototype chain continues until reaching Object.prototype.__proto__ which is null.

Event Delegation

Event delegation uses event bubbling to handle events at a parent level rather then individual child elements:

document.getElementById('parent').addEventListener('click', function(e) {
  if (e.target.classList.contains('child')) {
    // Handle child element click
  }
});

This approach improves performance by reducing event listeners. Use event.stopPropagation() to prevent bubbling.

Primitive vs Reference Types

Primitive types (String, Number, Boolean, null, undefined) are stored directly in stack memory. Reference types (Object, Function, Array) are stored in heap memory with stack references. Modifying a reference type affects all variables pointing to that memory location.

ES6 Features

Key ES6 additions:

• Block scoping (let, const)
• Class syntax
• Symbol primitive type
• Destructuring assignments
• Default function parameters
• Arrow functions
• Promises and async/await
• Modules (import/export)
• Set and Map data structures
• Extended array methods

Browser Storage Options

Client-side storage mechanisms:

• Cookies - Legacy storage with size limitations
• localStorage - Persistent key-value storage
• sessionStorage - Session-only storage
• IndexedDB - Advanced client-side database

Page Rendering Process

Browser rendering involves:

1. DNS resolution
2. TCP connection establishment
3. HTTP request/response
4. HTML parsing into DOM tree
5. CSS parsing into CSSOM tree
6. Combining DOM and CSSOM into render tree
7. Layout calculation
8. Painting pixels to screen

Image Optimization Techniques

Web image optimization approaches:

• CSS sprites - Combine multiple images into one
• Base64 encoding - Embed images directly in code
• SVG formats - Scalable vector graphics

Modern JavaScript Patterns

Advanced JavaScript concepts:

• Currying - Transforming multi-parameter functions
• Proxy objects - Custom behavior for fundamental operations
• Deep cloning - Creating independent object copies
• Event loop - JavaScript's concurrency model