CSS Mastery Challenge: Advanced Interview Questions Quiz

1. Box Model Calculation Scenario

   If a CSS element has width: 300px, padding: 20px, border: 5px solid, and margin: 10px, with box-sizing set to content-box, what will be the total width of the rendered element (excluding margin)?

   1. A. 350px
   2. B. 370px
   3. C. 330px
   4. D. 310px
   5. E. 300px

2. Display Values and Width Example

   Given a span element styled with display: inline and width: 200px, how will its width be rendered in the browser?

   1. A. It will expand to 200px as specified
   2. B. It will ignore the width property and fit its content
   3. C. It will throw a CSS error and not be rendered
   4. D. It will expand to the parent container’s width
   5. E. Its width will be halved due to being inline

3. Advanced Positioning and Stacking

   If two absolutely positioned elements overlap and one has z-index: 5 while the other has z-index: 10, which element will appear on top and why?

   1. A. The element with z-index: 5, because it is positioned first in the HTML
   2. B. The element with z-index: 10, because a higher z-index takes precedence
   3. C. Both elements will alternate visibility due to stacking context
   4. D. The stacking order will be random
   5. E. The z-index property only works on statically positioned elements

4. Flexbox vs Grid Use Case

   If you need to design a layout with both complex rows and columns, such as a multi-directional dashboard, which CSS layout model is more suitable and why?

   1. A. Flexbox, because it handles two-dimensional layouts by default
   2. B. Grid, because it supports both row and column alignment simultaneously
   3. C. Flexbox, since it has superior item alignment options
   4. D. Absolute positioning, to manually define each section
   5. E. Inline-block, for more precise control of each cell

5. Specificity Calculation Exercise

   Given the following selectors: ‘#main .nav li.active’, ‘.nav .active’, and ‘li.active’, which selector has the highest specificity and why?

   1. A. ‘li.active’, because it has the most simple selectors
   2. B. ‘.nav .active’, because class selectors have the highest specificity
   3. C. ‘#main .nav li.active’, because ID selectors give the highest specificity
   4. D. All three selectors have equal specificity
   5. E. ‘li.active’, because active states take precedence