Website Design CSS Layout and Grid Systems 1 — Questions and Answers
Question 1: What CSS property is used to create a flexbox container?
- display: block
- display: flex (Correct answer)
- display: grid
- display: inline
Correct answer: display: flex
Setting `display: flex` on a container enables the Flexbox layout model for its direct children.
Question 2: What does the CSS Grid `fr` unit represent?
- Fixed-width fractions
- A fraction of the available space in the grid container (Correct answer)
- Font ratio for grid items
- Frame rate for grid animations
Correct answer: A fraction of the available space in the grid container
The `fr` unit in CSS Grid represents a fraction of the available free space in the grid container after fixed sizes are allocated.
Question 3: What is the CSS Box Model?
- A 3D CSS animation framework
- The system describing how elements are sized via content, padding, border, and margin (Correct answer)
- A CSS grid layout specification
- A standard for responsive breakpoints
Correct answer: The system describing how elements are sized via content, padding, border, and margin
The CSS Box Model describes how every HTML element is rendered as a box composed of content, padding, border, and margin.
Question 4: Which CSS property controls the order of flex items within a flex container?
- flex-direction
- flex-order
- order (Correct answer)
- z-index
Correct answer: order
The `order` property in CSS Flexbox controls the visual order of flex items without changing the HTML source order.
Question 5: What does `box-sizing: border-box` do in CSS?
- Adds a border around all box elements
- Makes width and height include padding and border, not just the content area (Correct answer)
- Sets the box model to use margins in size calculations
- Resets all box model properties to default
Correct answer: Makes width and height include padding and border, not just the content area
With `border-box`, an element's specified width and height include padding and border, making layout calculations more predictable.
Question 6: What is a CSS 'media query' used for?
- Querying a media database
- Applying styles conditionally based on device features like screen width (Correct answer)
- Loading audio and video files in CSS
- Selecting elements based on media type in HTML
Correct answer: Applying styles conditionally based on device features like screen width
CSS media queries apply different styles based on conditions like screen width, height, or orientation, enabling responsive design.
Website Design CSS Layout and Grid Systems 1
What CSS property is used to create a flexbox container?