Recall & Review
beginner
What does the CSS
calc() function do?The
calc() function lets you do math inside CSS to calculate property values dynamically, like adding lengths or percentages.Click to reveal answer
beginner
How do you write a CSS rule to set width to half the viewport width minus 50 pixels using
calc()?You write:
width: calc(50vw - 50px); This means the width is half the viewport width minus 50 pixels.Click to reveal answer
beginner
Can you mix units like percentages and pixels inside
calc()?Yes! You can combine different units like
calc(100% - 20px) to get flexible layouts.Click to reveal answer
intermediate
Why is
calc() useful for responsive design?calc() helps create sizes that adjust based on screen size and fixed values, making layouts flexible and neat on different devices.Click to reveal answer
beginner
What is a common mistake to avoid when using
calc() in CSS?Avoid missing spaces around operators. For example, write
calc(100% - 50px) not calc(100%-50px) because spaces are required.Click to reveal answer
Which of these is a valid use of
calc() in CSS?✗ Incorrect
Option A is correct because it uses spaces around the minus operator, which is required syntax.
What units can you combine inside
calc()?✗ Incorrect
calc() allows mixing units like px, %, em, vw to create flexible values.Why might you use
calc(100% - 2rem) for padding?✗ Incorrect
This subtracts 2rem from 100% width, useful for spacing inside containers.
What happens if you omit spaces around operators in
calc()?✗ Incorrect
Spaces around operators are required; missing them causes the rule to be ignored.
Which CSS property is a good candidate to use
calc() with?✗ Incorrect
width often uses calc() to combine relative and fixed sizes.Explain how the CSS
calc() function helps create flexible layouts.Think about combining percentages and pixels for screen sizes.
You got /4 concepts.
Describe the syntax rules you must follow when writing a
calc() expression in CSS.Focus on spacing and operator usage.
You got /4 concepts.