Ace Your CSS Interviews: 10 Challenging Questions Based on Essential Concepts Quiz

1. Positioning Contexts in CSS

   In a nested layout where a child element has 'position: absolute', what determines the coordinate system against which the child is positioned?

   1. The nearest ancestor element with a position other than static
   2. The document root always
   3. The parent element if it has width and height
   4. Any ancestor that uses float property
   5. The closest ancestor using display: block

2. Centering Without Flex or Grid

   Which CSS technique correctly centers an absolutely positioned box both vertically and horizontally within its parent, even if the box has its own width and height?

   1. Setting 'top: 50%' and 'left: 50%' alone
   2. Applying 'top: 50%; left: 50%; transform: translate(-50%, -50%)'
   3. Using only 'margin: auto' on the child
   4. Applying 'vertical-align: middle' to the parent
   5. Setting both 'right: 0;' and 'bottom: 0;'

3. Relative vs Absolute Positioning

   If an element with 'position: absolute' has no positioned ancestor (no ancestor with 'position: relative', 'absolute', or 'fixed'), where will it be positioned with respect to?

   1. Its direct parent, regardless of positioning
   2. The nearest block-level parent
   3. The document's body element
   4. The root html element
   5. The viewport only

4. REM vs EM Units

   Which statement correctly describes the difference between the 'em' and 'rem' units in CSS?

   1. 'em' and 'rem' always equal the same size
   2. 'em' is relative to the root element's font size, 'rem' is relative to the parent element
   3. 'rem' stands for random em and varies with each property
   4. 'em' is relative to its parent element, while 'rem' is relative to the root element
   5. 'rem' is deprecated and should not be used

5. Responsive Typography

   How can using 'rem' units, as opposed to 'px', help create a more responsive design for font sizes throughout a web application?

   1. 'rem' units ignore root font-size settings in media queries
   2. They allow font sizes to scale globally by changing only the root font-size
   3. Every element needs its font size set individually with 'rem'
   4. 'rem' units are not supported by modern browsers
   5. 'px' units automatically scale with viewport changes

6. CSS Box Model Layers

   Which of the following correctly lists the order of the box model components from innermost to outermost for a standard block element?

   1. Margin u003E Border u003E Padding u003E Content
   2. Content u003E Padding u003E Border u003E Margin
   3. Content u003E Border u003E Padding u003E Margin
   4. Padding u003E Content u003E Border u003E Margin
   5. Border u003E Content u003E Padding u003E Margin

7. Impact of Box-sizing Property

   How does setting 'box-sizing: border-box' affect the calculation of an element's width and height?

   1. Padding and border are added outside the width and height
   2. Only border is included in width but not padding
   3. Width and height include padding and border
   4. Width and height are doubled
   5. It has no effect in modern browsers

8. Display Inline vs Inline-block

   What property difference allows 'display: inline-block' elements to be assigned a width and height, whereas 'inline' elements cannot?

   1. 'inline-block' elements create a new stacking context
   2. 'inline-block' elements remain on the same line but accept box model properties like width and height
   3. 'inline' elements inherit text-align from their parent automatically
   4. 'inline-block' disables margin and padding
   5. 'inline' allows margin-left and margin-right only

9. Width of Inline Elements

   If you attempt to set 'width: 200px' and 'height: 100px' on a 'span' element with default 'display: inline', what will happen?

   1. Only height will be applied, width is ignored
   2. Both width and height are ignored, span only grows to fit its content
   3. The span will become a block-level element automatically
   4. An error will occur in the browser
   5. The span will disappear from the layout

10. Combining Centering Methods

    Suppose you want to perfectly center a fixed-size box inside a parent, but you are not allowed to use flexbox or grid. Which of the following approaches will always center the child both horizontally and vertically?

    1. Setting 'margin: 0 auto' on the child only
    2. Using 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)' on the child
    3. Setting 'float: center' on the child
    4. Applying 'vertical-align: middle' on the parent
    5. Setting 'text-align: center' on the parent