mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): CSS Box Model Quiz (#56536)
Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
This commit is contained in:
Shivam Bhushan
+100
-100
@@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz.
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What happens when there is too much content to fit in an element box?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Underflow
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Compression
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Padding
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Overflow
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the default behavior of CSS when there is overflow?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Content is hidden
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Content is clipped
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Content is resized
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Content is visible
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
Why does CSS typically avoid hiding content when there is overflow?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To enhance page design by hiding irrelevant content
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To save memory and load pages faster
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To automatically fix broken layout issues
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To prevent data loss and make issues noticeable
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How can you handle overflow in CSS to hide content or add scrollbars?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Use `overflow: visible` to hide content and `overflow: auto` to always display scrollbars
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Use `overflow: collapse` to hide content and `overflow: expand` to display scrollbars
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Use `overflow: none` to hide content and `overflow: show` to display scrollbars
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Use `overflow: hidden` to hide content and `overflow: scroll` to always display scrollbars
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How can you specify different scrolling behaviors for the x-axis and y-axis in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
By using `scroll-x` and `scroll-y` properties
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
By using `overflow-x` and `overflow-y` separately in every case
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
By passing two values to the `overflow` property, where the first applies to `overflow-y` and the second to `overflow-x`
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
By passing two values to the `overflow` property, where the first applies to `overflow-x` and the second to `overflow-y`
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the `transform` CSS property allow you to do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Change the color and font style of an element
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Adjust the margin and padding of an element
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Modify the visibility and display of an element
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Rotate, scale, skew, or translate an element
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the `transform-box: fill-box` property do in an animation that rotates an element?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It resizes the element to fit the canvas during the transformation
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It changes the background of the element during transformation
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It sets the transform origin to the top-left corner of the element
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It sets the transform origin to the center of the element's bounding box, allowing it to spin in place
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the purpose of the `transform-origin` property in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It controls the animation speed of transformed elements
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It defines the display type of transformed elements
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It sets the background of transformed elements
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It specifies the point around which a transformation is applied to an element
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How does margin affect the size of an element in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Margin increases the actual size of the element's box
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Margin has no effect on the element's size or position
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Margin decreases the total area the element occupies on the page
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Margin affects the total area an element occupies but is not part of the actual size of the box
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the content area of an element in CSS represent?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It defines the margins and padding around the element
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It specifies the border thickness of the element
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It controls the visibility of the element on the page
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It contains the "real" content of the element, such as text, images, or videos
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the difference between `content-box` and `border-box` in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
`content-box` includes padding and border, while `border-box` includes only content dimensions
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Both `content-box` and `border-box` include only the border dimensions
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
`content-box` is used for 2D elements, while `border-box` is used for 3D elements
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
`content-box` includes only the content dimensions, while `border-box` includes content, padding, and border in its dimensions
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What is the purpose of CSS resets?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
To apply default styles to all elements for faster loading
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
To minimize the size of CSS files by removing unused styles
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
To optimize images and fonts for better performance
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
To remove default browser styling and create a consistent baseline for styling across different browsers
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What are the common types of CSS resets?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Bootstrap Reset, Tailwind Reset, and Foundation Reset
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Simple Reset, Comprehensive Reset, and Adaptive Reset
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Minimal Reset, Advanced Reset, and Legacy Reset
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Normalize.css, Eric Meyer's Reset, and HTML5 Reset
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the `scale3d()` property value do in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It rotates an element in 3D space
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It skews an element on the x, y, and z axes
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It translates an element in 3D space
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It scales an element along the x, y, and z axes
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How is the total width of an element calculated in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Total width = width + margin + padding + border
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Total width = width + margin + padding
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Total width = width + margin + border
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Total width = width + left padding + right padding + left border + right border
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the filter property in CSS do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It changes the layout of the element on the page
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It changes the background color and texture of an element
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It alters the size and position of an element
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It applies visual effects like blur and saturation to an element
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
How is the `filter` property specified in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
As only a single function, where percentage values must be used
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
As `block` or `inline`, with values expressed in pixels
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
As `none` or multiple functions, but only percentage values are accepted
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
As `none` or one or more functions, where percentage values can also be expressed as decimals
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the `contrast()` function in CSS do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
Adjusts the brightness of the image, where `0%` makes it black and `100%` makes it white
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
Changes the color balance of the image, where `0%` desaturates it and `100%` oversaturates it
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Alters the opacity of the image, where `0%` makes it transparent and `100%` makes it opaque
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
Adjusts the contrast of the input image, where `0%` makes it grey, `100%` has no effect, and values over 100% increase contrast
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What does the `hue-rotate()` function in CSS do?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
It changes the brightness of the input image based on degrees
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
It rotates an element's size and position in the document
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
It adjusts the saturation and contrast of the input image
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
It applies a hue rotation, where the `<angle>` value defines the degrees around the hue color circle
|
||||
|
||||
### --question--
|
||||
|
||||
#### --text--
|
||||
|
||||
Placeholder question
|
||||
What happens when two animated filters have different function list lengths in CSS?
|
||||
|
||||
#### --distractors--
|
||||
|
||||
Placeholder distractor 1
|
||||
The shorter list's filters override the longer list's filters
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 2
|
||||
The filters are discarded and no animation is applied
|
||||
|
||||
---
|
||||
|
||||
Placeholder distractor 3
|
||||
Only the first filter function in each list is animated
|
||||
|
||||
#### --answer--
|
||||
|
||||
Placeholder answer
|
||||
The longer list's missing equivalent filter functions are added to the shorter list using their initial values
|
||||
|
||||
|
||||
Reference in New Issue
Block a user