CSS

Question 1

What is a CSS module?

Answer 1

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

Question 2

How is width calculated with and without box-sizing: border-box?

Answer 2

Without: margin + width + border + padding

With: margin + width

Question 3

What is the nearest ancestor parent to an element with position: absolute?

Answer 3

Whatever closest parent has a position property that is not static (i.e., anything that is relative | absolute | fixe | sticky).

Question 4

What is the nearest ancestor parent to an element with position: fixed?

Answer 4

It is always the viewport, regardless of the position value of any parent elements.

Question 5

What is the difference between moving an element using margin-left: 50% and transform: translateX(50%)?

Answer 5

Using margin moves the element left by 50% of the container width. translateX does the same but by 50% of the element’s width.

Question 6

What would happen if we applied the following property to a grid?

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Answer 6

It would create three columns within the grid.

Using minmax, each column can have a minimum width of 200px but, if room allows, can expand.

Using auto-fill, the grid will fit as many columns as possible into a row so long as they follow the rule established by minmax.