CSS Interview Prep

CSS Box Model Explain करें

हर element अंदर से बाहर तक चार layers से बना एक rectangular box है: content, padding, border, और margin। box-sizing: content-box, जो default है, width और height को सिर्फ content area पर लागू करता है, जबकि box-sizing: border-box specified width और height के अंदर padding और border शामिल करता है।

उदाहरण: Explain the CSS Box Model

<style>
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  background: lightblue;
  border: 1px solid #666;
}
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  background: lightgreen;
  border: 1px solid #666;
  margin-top: 10px;
}
</style>
<div class="content-box">content-box: renders 240px total</div>
<div class="border-box">border-box: stays 200px</div>

Specificity कैसे Calculate होती है

Specificity counts के एक tuple के रूप में calculate होती है, inline styles, फिर ID selectors, फिर class, attribute, और pseudo-class selectors, फिर element और pseudo-element selectors, higher categories हमेशा किसी भी संख्या की lower categories से भारी पड़ती हैं, और !important normal specificity को पूरी तरह override कर देता है।

उदाहरण: How Does Specificity Get Calculated

<style>
a { color: black; }
.link { color: blue; }
#nav-link { color: red; }
</style>
<a href="#" id="nav-link" class="link">ID beats class beats element: red</a>

Flexbox बनाम Grid, और Elements को Center कैसे करें

Flexbox items को एक समय में एक axis के साथ arrange करता है, navigation bars और button groups के लिए ideal, जबकि Grid items को rows और columns के आर-पार एक साथ arrange करता है, पूरे page layouts के लिए ideal।

किसी element को center करना एक common follow-up question है, जिसका सबसे अच्छा जवाब है display: flex को align-items: center और justify-content: center के साथ combine करना।

उदाहरण: Flexbox vs Grid, and How to Center Elements

<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  background: #eee;
}
.center div {
  background: coral;
  padding: 10px;
}
</style>
<div class="center">
  <div>Centered with flex + align-items + justify-content</div>
</div>

position Values और Cascade को Explain करें

static कोई offset behavior नहीं वाला default है, relative किसी element को उसकी जगह बनाए रखते हुए उसकी normal position से offset करता है, absolute इसे flow से हटा देता है और सबसे नज़दीकी positioned ancestor के against position करता है, fixed viewport के against position करता है, और sticky scroll के आधार पर relative और fixed के बीच toggle करता है।

Cascade वह algorithm है जो origin, specificity, और source order का उसी priority में इस्तेमाल करके conflicting rules resolve करता है।

उदाहरण: Explain the position Values and the Cascade

<style>
.relative {
  position: relative;
  top: 10px;
  background: #eef;
  padding: 20px;
}
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  background: coral;
  padding: 8px;
}
</style>
<div class="relative">
  <div class="absolute">Positioned against the relative ancestor</div>
</div>

Pseudo-Class बनाम Pseudo-Element, और Inline बनाम Block बनाम Inline-Block

:hover या :first-child जैसा एक pseudo-class किसी element को एक particular state या structural position में target करता है, एक single colon से लिखा जाता है, जबकि ::before या ::after जैसा एक pseudo-element किसी element के generated sub-part को target करता है, एक double colon से लिखा जाता है।

display: block elements एक पूरी नई line लेते हैं और width व height accept करते हैं, inline elements text के साथ flow करते हैं और width व height को नज़रअंदाज़ करते हैं, और inline-block elements text के साथ flow करते हैं लेकिन width व height accept करते हैं।

उदाहरण: Pseudo-Class vs Pseudo-Element, and Inline vs Block vs Inline-Block

<style>
li:first-child { font-weight: bold; }
li::before { content: "→ "; }
</style>
<ul>
  <li>First, bold, with an arrow prefix</li>
  <li>Second</li>
</ul>