Q31
Q31 Why might an element with box-sizing: border-box; and width: 100%; still overflow its container?
Padding or border not accounted for
Container's width includes padding
Incorrect measurement of the container's width
A global style affecting box-sizing
Q32
Q32 What is the default flex-direction of a flex container?
row
column
row-reverse
column-reverse
Q33
Q33 Which CSS property makes an element a flex container?
display: flex
display: grid
display: block
display: inline-block
Q34
Q34 How do you align items in the center of a flex container along the cross axis?
align-items: center
justify-content: center
align-content: center
justify-items: center
Q35
Q35 In CSS Grid layout, what property defines the number and sizes of columns in the grid?
grid-template-columns
grid-template-rows
grid-column
grid-row
Q36
Q36 Which property aligns a flex item in the center of its container along the main axis?
align-self: center
justify-self: center
justify-content: center
align-items: center
Q37
Q37 What does flex-wrap: wrap; do in a flex container?
Forces items to stay in one line
Allows items to wrap onto multiple lines
Changes the direction of flex items
Applies a fixed width to flex items
Q38
Q38 How can you create a grid with equal-width columns using CSS Grid?
Use grid-template-columns: auto;
Use grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
Use grid-template-columns: 1fr 1fr 1fr;
Use grid-template-columns: repeat(3, 1fr);
Q39
Q39 What is the difference between justify-content and align-items in a flex container?
justify-content aligns along the main axis, align-items along the cross axis
justify-content aligns along the cross axis, align-items along the main axis
They have the same function but apply to different elements
There is no difference, they are interchangeable
Q40
Q40 In a CSS Grid layout, how do you place an item to start on column line 2 and end on column line 4?
grid-column: 2 / 4;
grid-column-start: 2; grid-column-end: 4;
Both A and B are correct
grid-column: 2 / span 2;
Q41
Q41 Which property is used to define the space between Grid items?
grid-gap
grid-row-gap
grid-column-gap
gap
Q42
Q42 Given a container with display: flex; and justify-content: space-between;,
how are the flex items arranged?
Evenly spaced along the main axis, with the first item at the start and the last at the end
Stacked vertically
Overlapped
Evenly spaced with equal margins on all sides
Q43
Q43 How do you make a flex item take up the remaining space in a flex container?
flex-grow: 1;
flex-basis: auto;
flex: auto;
flex: 1;
Q44
Q44 In CSS Grid, what does fr unit stand for?
Fraction of the available space
Fixed ratio
Frame rate
Flexible resize
Q45
Q45 How can you create an asymmetrical grid layout with three rows where the first row is 200px tall, the second is auto-sized, and the third is 1fr tall?
grid-template-rows: 200px auto 1fr;
grid-template-rows: repeat(3, 200px auto 1fr);
grid-template-rows: 200px 1fr auto;
grid-template-rows: auto 200px 1fr;
Q46
Q46 Why might items in a flex container not be displaying in a single row as expected?
flex-wrap is set to wrap
The container is too narrow
There are too many items
All of the above
Q47
Q47 In a grid layout, why might an item not align as expected with justify-items: start;?
The item has an explicit position set
The grid container is using align-items instead
The property is not supported by the browser
The item is absolutely positioned
Q48
Q48 What could cause a flex item to not shrink as expected when the container size is reduced?
flex-shrink is set to 0
The item has a fixed width set
The container does not have display: flex;
Both A and B are correct
Q49
Q49 Why might a CSS Grid item overlap another grid item?
The items are placed in the same grid cell without grid-row-start or grid-column-start set
There's a negative margin applied
The grid container has grid-auto-flow: dense; set
Both A and C are correct
Q50
Q50 What does the position property do in CSS?
Defines the color of an element
Changes the size of an element
Specifies the element's position in the document
Alters the font of an element
Q51
Q51 Which value of the position property makes an element's position relative to its normal position?
static
relative
absolute
fixed
Q52
Q52 How does the absolute positioning value differ from fixed positioning?
absolute positions an element relative to its nearest positioned ancestor
absolute positions it relative to the viewport
fixed positions it relative to its nearest positioned ancestor
fixed positions it relative to the viewport
Q53
Q53 What is the purpose of the z-index property in CSS?
To adjust the zoom level of elements
To set the stacking order of positioned elements
To change the opacity of elements
To rotate elements
Q54
Q54 Which position values can z-index be applied to?
static only
relative, absolute, and fixed only
absolute and fixed only
relative, absolute, fixed, and sticky
Q55
Q55 What happens if an element with position: absolute; has no positioned ancestors?
It is positioned relative to the document body
It disappears from the document
It remains in its original position
It is positioned relative to the nearest block-level element
Q56
Q56 How can z-index affect elements with the same stacking context?
It moves elements horizontally across the page
It changes the vertical stacking order
It alters the opacity of elements
It rotates elements
Q57
Q57 What determines an element's stacking context?
Its position and z-index values
Its display value
Its float value
Its opacity value
Q58
Q58 Can an element with a lower z-index ever appear above an element with a higher z-index?
Yes, if it's positioned more closely
No, z-index values strictly determine stacking order
Yes, if it's in a different stacking context
Yes, if it uses a position: fixed; style
Q59
Q59 What is the default position value for HTML elements?
static
relative
absolute
fixed
Q60
Q60 Given two overlapping elements with position: absolute;, how do you ensure the first element appears on top?
Set a higher z-index value on the first element
Set a lower z-index value on the second element
Use position: relative; on the first element
Both A and B are correct
