CSS Interview Questions

The box model consists of content, padding, border, and margin.

By default, width applies to content only. With box-sizing: border-box, width includes padding and border, which makes layouts easier to reason about.

Specificity decides which selector wins when multiple rules target the same element.

Order from weaker to stronger is roughly: element selectors, class/attribute/pseudo-class selectors, then ID selectors, and finally inline styles.

The cascade combines selector specificity, source order, and importance (!important) to determine final styles.

Understanding the cascade helps avoid unnecessary overrides and brittle stylesheets.

• relative: keeps element in normal flow, allows offset positioning.
• absolute: removed from flow, positioned against nearest positioned ancestor.
• fixed: positioned relative to viewport.
• sticky: behaves like relative until threshold, then sticks like fixed.

Flexbox is ideal for one-dimensional layouts (row or column), alignment, spacing, and equal-height distribution.

It simplifies centering and responsive rearrangement without float hacks.

Grid is better for two-dimensional layouts (rows and columns together), such as dashboards, cards, or page shells.

Flexbox and Grid are complementary, not competing tools.

• em: relative to parent font-size.
• rem: relative to root font-size.
• %: relative to parent dimension/property context.
• vw/vh: relative to viewport width/height.

Choosing units intentionally improves responsive behavior and accessibility.

Pseudo-classes target states (e.g., :hover, :focus-visible, :nth-child). Pseudo-elements target virtual parts (e.g., ::before, ::after, ::placeholder).

They help reduce extra markup for UI states and decoration.

z-index only compares elements within the same stacking context. New contexts are created by properties like positioned elements with z-index, opacity < 1, transform, and filter.

Many z-index bugs come from unexpected stacking contexts.

display: none removes the element from layout flow. visibility: hidden keeps layout space but hides the element visually.

Both hide visually, but layout and accessibility behavior differ.

overflow controls clipping/scrolling when content exceeds box bounds.

Common values are visible, hidden, auto, and scroll.

Flex items can refuse to shrink due to intrinsic min-size behavior.

Setting min-width: 0 allows long text/content to wrap or truncate correctly inside flexible layouts.

Media queries apply styles conditionally by viewport/device features.

Example:

@media (max-width: 768px) {
.sidebar {
display: none;
}
}

They are core for responsive design.

clamp(min, preferred, max) creates fluid values with safe limits.

Useful for typography and spacing that scales with viewport but remains readable.

object-fit controls how replaced content fits inside a box.

Common values:

• cover: fills box, may crop.
• contain: fits entirely, may leave empty space.