MCQs Of Class 3: CSS Box Model

 

MCQs Of Class 3: CSS Box Model

1.   Which property is used to specify the space between the border and content of a box in the box model?

o    a) margin

o    b) padding

o    c) border

o    d) width

Answer: b) padding
Explanation: Padding is the space between the content and the border of the box.

2.   What is the effect of setting float: left; on an element?

o    a) The element stays at its current position.

o    b) The element floats to the left, and other elements will flow around it.

o    c) The element floats to the right, and other elements will flow around it.

o    d) The element moves to the bottom.

Answer: b) The element floats to the left, and other elements will flow around it.
Explanation: The float: left; property causes the element to float to the left and other content to wrap around it.

3.   Which property is used to clear floated elements?

o    a) overflow

o    b) margin

o    c) clear

o    d) padding

Answer: c) clear
Explanation: The clear property is used to prevent elements from flowing around a floated element.

4.   How do you make a box’s corners rounded in CSS?

o    a) border-radius

o    b) border-style

o    c) corner-radius

o    d) rounded-corner

Answer: a) border-radius
Explanation: The border-radius property is used to create rounded corners on a box.

5.   What is the effect of the float: right; CSS property?

o    a) The element moves to the top.

o    b) The element stays in place.

o    c) The element floats to the right, and other elements will flow around it.

o    d) The element moves to the bottom.

Answer: c) The element floats to the right, and other elements will flow around it.
Explanation: The float: right; property causes the element to float to the right, and other content flows around it.

6.   Which of the following is the correct method to fix layout issues caused by floats?

o    a) using clear: both;

o    b) using float: none;

o    c) using clear: left;

o    d) using overflow: hidden;

Answer: a) using clear: both;
Explanation: The clear: both; property clears floats on both the left and right, fixing layout issues caused by floating elements.

7.   Which of the following properties is part of the CSS Box Model?

o    a) padding

o    b) margin

o    c) border

o    d) All of the above

Answer: d) All of the above
Explanation: The CSS Box Model includes content, padding, border, and margin.

8.   What does the display: flex; property do in CSS?

o    a) It arranges items horizontally.

o    b) It arranges items vertically.

o    c) It allows the parent to align child elements flexibly.

o    d) It forces all items to fit in a single line.

Answer: c) It allows the parent to align child elements flexibly.
Explanation: The display: flex; property enables a flexible layout for child elements within a container.

9.   Which property is used to create space between the border and the outer edge of a box?

o    a) margin

o    b) padding

o    c) border-spacing

o    d) border-width

Answer: a) margin
Explanation: Margin creates space outside the border, separating the element from others.

10.                     What will happen if a floated element is not cleared properly?

• a) The layout will break.
• b) The element will shrink.
• c) The page will reload automatically.
• d) The floated element will disappear.

Answer: a) The layout will break.
Explanation: If floated elements are not cleared, it can cause issues where elements are positioned incorrectly.

11.                     What is the purpose of the justify-content: space-between; property in Flexbox?

• a) Aligns items vertically.
• b) Centers items horizontally.
• c) Distributes items evenly with space between them.
• d) Puts space before and after items.

Answer: c) Distributes items evenly with space between them.
Explanation: justify-content: space-between; spaces out the items in a container, ensuring there is equal space between them.

12.                     Which of the following is a valid value for the clear property?

• a) both
• b) none
• c) left
• d) All of the above

Answer: d) All of the above
Explanation: The clear property can be set to left, right, both, or none to control floating elements.

13.                     Which CSS property is used to apply the space inside an element between the content and its border?

• a) border
• b) padding
• c) margin
• d) width

Answer: b) padding
Explanation: Padding creates space between the content and the border of an element.

14.                     What does the flex-direction: column; property do?

• a) It arranges elements horizontally.
• b) It arranges elements vertically.
• c) It centers elements in a container.
• d) It sets the size of each element.

Answer: b) It arranges elements vertically.
Explanation: The flex-direction: column; property changes the layout direction to vertical.

15.                     Which of the following properties is used to change the background color of a box in the box model?

• a) background-color
• b) color
• c) background-image
• d) text-color

Answer: a) background-color
Explanation: The background-color property is used to set the background color of an element.

16.                     What will happen if you set the border-radius property to 50%?

• a) The box will have sharp edges.
• b) The box will turn into a circle if the width and height are equal.
• c) The box will become invisible.
• d) The box will become a rectangle.

Answer: b) The box will turn into a circle if the width and height are equal.
Explanation: A border-radius of 50% creates a circular shape if the width and height of the element are equal.

17.                     Which of the following values can justify-content take in a Flexbox layout?

• a) center
• b) space-around
• c) flex-start
• d) All of the above

Answer: d) All of the above
Explanation: justify-content can take values such as center, space-around, flex-start, and others to align and distribute flex items.

18.                     What happens when you apply overflow: hidden; to an element?

• a) It hides all content inside the element.
• b) It hides content that overflows the element’s boundaries.
• c) It expands the element to fit all content.
• d) It clears floated elements.

Answer: b) It hides content that overflows the element’s boundaries.
Explanation: The overflow: hidden; property hides content that extends beyond the element’s boundaries.

19.                     What is the default value of the display property for a <div> element?

• a) block
• b) inline
• c) flex
• d) none

Answer: a) block
Explanation: The default display value for a <div> element is block, meaning it takes up the full width available.

20.                     Which CSS property is used to remove the space between the borders of adjacent table cells?

• a) margin
• b) padding
• c) border-spacing
• d) border-collapse

Answer: c) border-spacing
Explanation: The border-spacing property controls the space between cells in a table.

21.                     What is the main advantage of using Flexbox over traditional float-based layouts?

• a) Flexbox can only be used with floats.
• b) Flexbox provides a more predictable and flexible layout.
• c) Flexbox only works in certain browsers.
• d) Flexbox does not require any CSS rules.

Answer: b) Flexbox provides a more predictable and flexible layout.
Explanation: Flexbox allows for more control over layouts, particularly when elements need to be aligned or spaced dynamically.

22.                     Which property is used to control the size of the gaps between the flex items?

• a) flex-gap
• b) gap
• c) space-between
• d) padding

Answer: b) gap
Explanation: The gap property is used in Flexbox and Grid layouts to control the space between items.

23.                     How does the position: absolute; property affect an element?

• a) It positions the element relative to its nearest positioned ancestor.
• b) It positions the element relative to the viewport.
• c) It makes the element disappear.
• d) It forces the element into a flex layout.

Answer: a) It positions the element relative to its nearest positioned ancestor.
Explanation: An element with position: absolute; is positioned relative to its nearest positioned ancestor, not the viewport.

24.                     What is the effect of box-sizing: border-box;?

• a) It includes padding and border in the total width and height.
• b) It makes the element’s width and height larger than usual.
• c) It excludes padding and border from the element's width and height.
• d) It makes the box completely transparent.

Answer: a) It includes padding and border in the total width and height.
Explanation: box-sizing: border-box; ensures that padding and borders are included in the element's total width and height, simplifying layout calculations.

25.                     What is the default value of the position property for a <div> element?

• a) relative
• b) absolute
• c) static
• d) fixed

Answer: c) static
Explanation: The default position value for most elements, including <div>, is static, meaning the element is positioned according to the normal document flow.

(Continued in the next message)

4o mini

You said:

next 25

ChatGPT said:

ChatGPT

Here are the remaining 25 MCQs:

26.                     What is the purpose of the align-items property in Flexbox?

• a) Aligns items horizontally.
• b) Aligns items vertically.
• c) Justifies the space between items.
• d) Aligns the entire container.

Answer: b) Aligns items vertically
Explanation: The align-items property is used to align items vertically along the cross-axis in Flexbox.

27.                     What is the difference between padding and margin in the box model?

• a) Padding is inside the element, and margin is outside the element.
• b) Padding is used to separate elements, and margin is used to style text.
• c) Padding adds space outside the element, and margin adds space inside the element.
• d) There is no difference.

Answer: a) Padding is inside the element, and margin is outside the element.
Explanation: Padding is the space between the content and the border, while margin is the space outside the border, separating the element from other elements.

28.                     How can you prevent an element's border from overlapping the content?

• a) Use box-sizing: border-box;
• b) Use overflow: hidden;
• c) Use padding: 0;
• d) Use display: block;

Answer: a) Use box-sizing: border-box;
Explanation: By setting box-sizing: border-box;, padding and borders are included in the element's total width and height, preventing overlap.

29.                     What is the default value of the position property?

• a) relative
• b) static
• c) absolute
• d) fixed

Answer: b) static
Explanation: By default, the position property is set to static, which means elements are positioned based on the normal document flow.

30.                     Which of the following can you apply to a Flex container to align its items horizontally?

• a) align-items: center;
• b) justify-content: center;
• c) flex-direction: column;
• d) align-content: center;

Answer: b) justify-content: center;
Explanation: justify-content is used to align items along the main axis (horizontally in the default row direction).

31.                     Which of the following is a valid value for the overflow property?

• a) hidden
• b) scroll
• c) visible
• d) All of the above

Answer: d) All of the above
Explanation: The overflow property can have values like hidden, scroll, and visible to control how content is handled when it overflows its container.

32.                     What happens when you set display: none; on an element?

• a) The element will still take up space in the layout.
• b) The element will be hidden, and no space will be allocated for it.
• c) The element will shrink but still be visible.
• d) The element will become invisible but still take up space.

Answer: b) The element will be hidden, and no space will be allocated for it.
Explanation: display: none; removes the element from the layout entirely, and no space is reserved for it.

33.                     Which of the following properties can you use to center content horizontally in a Flexbox container?

• a) justify-content: center;
• b) align-items: center;
• c) margin: 0 auto;
• d) text-align: center;

Answer: a) justify-content: center;
Explanation: In Flexbox, justify-content: center; centers the items horizontally along the main axis.

34.                     What does the flex-wrap property do in Flexbox?

• a) It allows items to wrap onto the next line when necessary.
• b) It defines how items should be aligned vertically.
• c) It sets the width of flex items.
• d) It prevents items from being displayed on the same line.

Answer: a) It allows items to wrap onto the next line when necessary.
Explanation: The flex-wrap property controls whether items should wrap onto the next line if there’s not enough space.

35.                     Which property can you use to change the stacking order of elements?

• a) z-index
• b) stacking-order
• c) layer
• d) position

Answer: a) z-index
Explanation: The z-index property determines the stacking order of positioned elements (elements with position other than static).

36.                     Which property is used to specify the size of the border around a box?

• a) border-width
• b) border-style
• c) border-color
• d) border

Answer: a) border-width
Explanation: The border-width property controls the thickness of the border around a box.

37.                     What does the align-self property do in Flexbox?

• a) Aligns the flex container itself.
• b) Aligns individual items inside the flex container.
• c) Justifies the space between items.
• d) Aligns items vertically.

Answer: b) Aligns individual items inside the flex container.
Explanation: The align-self property allows individual items within a flex container to override the container's align-items setting.

38.                     Which property do you use to specify the spacing between columns in a grid layout?

• a) column-gap
• b) grid-gap
• c) gap
• d) grid-column

Answer: a) column-gap
Explanation: The column-gap property defines the space between columns in a grid layout.

39.                     What happens when you set display: inline-block; on an element?

• a) The element behaves like a block-level element but allows other elements to appear next to it.
• b) The element behaves like an inline element.
• c) The element is removed from the layout.
• d) The element takes up the full width of its container.

Answer: a) The element behaves like a block-level element but allows other elements to appear next to it.
Explanation: display: inline-block; allows the element to behave like a block element while remaining inline with other elements.

40.                     Which of the following is used to control the amount of space between text and the border of an element?

• a) margin
• b) padding
• c) border-spacing
• d) text-align

Answer: b) padding
Explanation: Padding creates space between the content (text) and the border of an element.

41.                     What is the result of setting display: grid; on an element?

• a) The element is displayed as a block.
• b) The element behaves like a table.
• c) The element becomes a grid container, allowing you to define rows and columns.
• d) The element is hidden.

Answer: c) The element becomes a grid container, allowing you to define rows and columns.
Explanation: display: grid; turns an element into a grid container, allowing the use of grid layout techniques like grid-template-rows and grid-template-columns.

42.                     Which of the following is a valid CSS value for the float property?

• a) left
• b) right
• c) none
• d) All of the above

Answer: d) All of the above
Explanation: The float property can take values like left, right, and none to control the positioning of floated elements.

43.                     What is the purpose of the grid-template-columns property in CSS Grid?

• a) It defines the number of rows in the grid.
• b) It defines the size of the columns in the grid.
• c) It sets the alignment of items in the grid.
• d) It defines the grid container’s layout.

Answer: b) It defines the size of the columns in the grid.
Explanation: The grid-template-columns property specifies the size of columns in a grid layout.

44.                     Which of the following properties is used to set the space between rows in a Flexbox layout?

• a) row-gap
• b) gap
• c) flex-gap
• d) align-items

Answer: b) gap
Explanation: The gap property can set space between rows (and columns) in a Flexbox or Grid layout.

45.                     What is the difference between inline and block elements?

• a) inline elements take up full width, while block elements do not.
• b) inline elements only occupy the space they need, while block elements take up the full width available.
• c) inline elements cannot have padding or margins.
• d) There is no difference.

Answer: b) inline elements only occupy the space they need, while block elements take up the full width available.
Explanation: inline elements only take up the width required for their content, while block elements span the entire width of their container.

46.                     What does the grid-template-areas property do in CSS Grid?

• a) It defines how grid items are positioned in the grid.
• b) It sets the size of the grid rows and columns.
• c) It specifies the background color of grid items.
• d) It creates gaps between grid items.

Answer: a) It defines how grid items are positioned in the grid.
Explanation: The grid-template-areas property allows you to visually arrange grid items using named areas.

47.                     Which of the following properties does not affect an element’s position?

• a) position
• b) top
• c) margin
• d) float

Answer: c) margin
Explanation: While position, top, and float directly affect an element’s position, margin does not reposition the element, but creates space around it.

48.                     What does the order property do in Flexbox?

• a) Changes the visual order of flex items without affecting the document source order.
• b) Changes the alignment of items.
• c) Defines how flex items should wrap.
• d) Sets the size of flex items.

Answer: a) Changes the visual order of flex items without affecting the document source order.
Explanation: The order property allows you to change the order of elements in Flexbox without affecting their original order in the HTML structure.

49.                     Which property controls the gap between flex items in a Flexbox container?

• a) flex-gap
• b) gap
• c) spacing
• d) margin

Answer: b) gap
Explanation: The gap property is used to control the space between items in a Flexbox or Grid layout.

50.                     What does the justify-content property do in Flexbox?

• a) Aligns items vertically.
• b) Aligns items horizontally along the main axis.
• c) Aligns items to the center of the container.
• d) Aligns items at the start of the container.

Answer: b) Aligns items horizontally along the main axis.
Explanation: The justify-content property is used to align items horizontally (or along the main axis) in a Flexbox container.