Top 16 Front-End Interview Questions and Answers Explained

1. Difference between inline and block elements? Compatibility of inline‑block (IE8 and below)

Inline elements arrange horizontally, cannot contain block elements, and width/height settings have no effect (line‑height can be set). Top/bottom margin and padding are ineffective. Block elements occupy a full line, stack vertically, and start on a new line.

Compatibility: use display:inline-block; with display:inline; and zoom:1; for older IE.

2. Common ways to clear floats – which is best?

1) Set a height on the parent div. 2) Add an empty div with clear:both at the end. 3) Use a pseudo‑element :after with zoom on the parent. 4) Set overflow:hidden on the parent. 5) Set overflow:auto on the parent. 6) Float the parent and define its width. 7) Set display:table on the parent. 8) Add a br with clear:both at the end.

3. Common box-sizing values and their effects

box-sizing: content-box | border-box | inherit;

content-box : width and height apply to the content box; padding and border are added outside the specified dimensions. border-box : padding and border are included within the specified width and height, so the content area is reduced accordingly.

4. Difference between using <link> and @import to load styles

<link>

is an XHTML tag that can load CSS, define RSS feeds, and set relationship attributes; it loads simultaneously with the page. @import is a CSS rule that loads CSS only after the page has finished loading. @import is supported from IE5 onward, while <link> has no compatibility issues.

5. Progressive enhancement vs. graceful degradation

Progressive enhancement builds a basic, functional version for low‑end browsers first, then adds advanced features for modern browsers. Graceful degradation starts with a full‑featured version and then adds fallbacks for older browsers. The key difference is that graceful degradation begins with a complex implementation and trims down, whereas progressive enhancement starts simple and expands forward.

6. What is margin collapse and its results?

Margin collapse (margin‑collapse) occurs when adjacent vertical margins of two boxes combine into a single margin. The resulting margin follows these rules:

If both margins are positive, the larger value wins.

If both are negative, the larger absolute value wins.

If one is positive and the other negative, they are added together.

7. What are Sass and LESS and why use them?

They are CSS preprocessors that add a programming‑like layer to CSS, allowing variables, inheritance, calculations, and functions. They improve code organization, hide browser‑specific syntax differences, enable multiple inheritance, and remain fully compatible with existing CSS.

8. Positioning values – who does relative and absolute position relative to?

absolute

positions an element relative to the nearest ancestor that is not static. fixed (unsupported in old IE) positions relative to the browser viewport. relative positions an element relative to its original place in the normal flow.

9. Concepts and differences of block , inline , and inline-block

display:block

: element occupies the full line, width defaults to 100% of its container, can set width/height, margin, and padding. display:inline: element flows with surrounding text, width follows content, height cannot be set, horizontal margin/padding work, vertical margin/padding have no effect. display:inline-block: behaves like an inline element but allows width and height like a block. It can be placed side‑by‑side with other inline elements. Older IE versions need a zoom:1 hack.

10. How to horizontally center an element

For inline elements, set text-align:center on the parent. For block elements, give the element a width and set margin-left:auto; margin-right:auto. In IE6, also set text-align:center on the parent and reset the child’s alignment.

11. How CSS specificity is calculated

Specificity follows the nearest‑rule principle: when selectors have equal weight, the rule defined later wins. Load order also matters – later styles override earlier ones.

Specificity hierarchy: inline styles > embedded (internal) styles > external styles. Order of selector types: !important > id > class > tag. !important outranks inline styles.

12. New CSS3 pseudo‑classes

Examples include:

p:first-of-type

p:last-of-type

p:only-of-type

p:only-child

p:nth-child(2)

13. New CSS3 features

New selectors (e.g., :not(.input)), border‑radius, multi‑column layout, shadows and reflections, text effects, text‑decoration, gradients, transforms (scale, translate, skew, rotate), scaling, positioning, animation, multiple backgrounds, etc.

14. CSS3 Flexbox (Flexible Box Layout) and its use cases

Flexbox is a layout model that arranges items along a single axis (row or column) and distributes space among them. It simplifies complex layouts, supports nesting of flex containers, and adapts well to different screen sizes.

15. Common browser compatibility issues and typical hacks

PNG‑24 images appear with background in IE6 – use PNG‑8.

Default margin/padding differ – reset with *{margin:0;padding:0;}.

IE6 double‑margin bug on floated elements – use display:inline hack.

Float‑induced double spacing – apply display:inline to the floated element.

Custom attribute access – use getAttribute() uniformly.

Event object differences (x/y vs. pageX/pageY) – handle per browser.

Conditional comments for IE – beware extra HTTP requests.

Chrome forces minimum 12px font size – disable with -webkit-text-size-adjust:none;.

Hover style loss after link visit – order CSS rules as L‑V‑H‑A.

16. Using media queries for mobile layout

Media queries let CSS apply only when certain conditions (width, height, color, etc.) are true. When the query matches, the associated styles are applied; otherwise they are ignored but still downloaded. This enables responsive design without altering HTML content.