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.