CSS Interview Questions: 20 Practice Questions with Answers and Code Examples

1. How to center an element horizontally?
   Answer: You can use the text-align attribute to set the text alignment of the parent element to center, or you can use the margin attribute to set the left and right margins of the element to auto.
2. How to vertically center an element?
   Answer: You can use the display:flex and align-items:center attributes to vertically center the element, or you can use the absolute positioning and top attributes to combine the height of the parent element to vertically center the element.
3. What is the box model?
   Answer: The box model is a model used in CSS to describe the size and position of elements. It regards each element as a rectangular box, including content area, inner margin area, border area and outer margin area.
4. How to style the border of an element?
   Answer: You can use the border attribute to set the border style of the element, for example, border: 1px solid #000; will set the border of the element to 1 pixel wide, solid line, black.
5. How to set the background color of an element?
   Answer: You can use the background-color attribute to set the background color of an element, for example background-color: #fff; will set the background color of the element to white.
6. How to set the font size of an element?
   Answer: You can use the font-size attribute to set the font size of an element, for example, font-size: 16px; will set the font size of the element to 16 pixels.
7. How to set the font color of an element?
   Answer: You can use the color attribute to set the font color of an element, for example color: #000; will set the font color of the element to black.
8. How to set the text alignment of an element?
   Answer: You can use the text-align attribute to set the text alignment of the element, such as text-align: center; will center the text of the element horizontally.
9. How to set the text wrapping method of an element?
   Answer: You can use the white-space attribute to set the text wrapping method of the element, for example, white-space: pre-wrap; will automatically wrap the text of the element according to spaces and line breaks.
10. How to set the transparency of an element?
    Answer: You can use the opacity attribute to set the transparency of the element, and the value range is 0~1. For example, opacity: 0.5; will set the transparency of the element to 50%.
11. How to set the shadow effect of an element?
    Answer: You can use the box-shadow property to set the shadow effect of an element, for example box-shadow: 0 0 10px #000; will generate a 10-pixel wide, black shadow around the element.
12. How to set the rounded corner effect of an element?
    Answer: You can use the border-radius attribute to set the rounded corner effect of the element, for example, border-radius: 5px; will set the four corners of the element to a rounded corner of 5 pixels.
13. How to set the floating effect of an element?
    Answer: You can use the float property to set the floating effect of the element, such as float: left; will float the element to the left.
14. How to clear the floating effect of an element?
    Answer: You can use the clear attribute to clear the floating effect of the element, for example, clear: both; will clear all floating elements below the element.
15. How to set width and height of element?
    Answer: You can use the width and height attributes to set the width and height of the element, for example, width: 100px; height: 100px; will set the width and height of the element to 100 pixels.
16. How to set min-width and max-width of an element?
    Answer: You can use the min-width and max-width attributes to set the minimum and maximum width of the element, such as min-width: 100px;max-width: 200px; will set the width of the element to between 100 pixels and 200 pixels.
17. How to set min-height and max-height of an element?
    Answer: You can use the min-height and max-height attributes to set the minimum and maximum height of the element, such as min-height: 100px;max-height: 200px; will set the height of the element to between 100 pixels and 200 pixels.
18. How to set the z-index value of an element?
    Answer: You can use the z-index attribute to set the z-index value of the element, for example z-index: 1; will set the z-index value of the element to 1.
19. How to set the positioning method of the element?
    Answer: You can use the position attribute to set the positioning method of the element, for example, position: absolute; will set the positioning method of the element to absolute positioning.
20. How to set the stacking order of elements?
    Answer: You can use the z-index attribute to set the stacking order of elements. Elements with a larger stacking order will be displayed higher. For example, z-index: 2; will set the stacking order of elements to 2.