Sizing Items in CSS

Question 1

What property is used to set the width of an element in CSS?

Answer 1

The width property.

Question 2

True or False: The height property can take values in pixels, percentages, and em units.

Answer 2

True.

Question 3

Fill in the blank: The CSS property that controls the size of text is called ___ .

Answer 3

font-size.

Question 4

What is the default value of the box-sizing property?

Answer 4

content-box.

Question 5

Which CSS unit is relative to the viewport width?

Answer 5

vw (viewport width).

Question 6

What does the term ‘responsive design’ refer to?

Answer 6

Designing web pages that look good on all devices by using fluid grids and flexible images.

Question 7

Multiple Choice: Which unit is NOT a length unit in CSS? A) px B) em C) bg

Answer 7

C) bg.

Question 8

What CSS property is used to set the maximum width of an element?

Answer 8

max-width.

Question 9

True or False: The value ‘auto’ for width allows the browser to calculate the width of an element.

Answer 9

True.

Question 10

What does the ‘min-height’ property do?

Answer 10

It sets the minimum height of an element.

Question 11

Which CSS unit is relative to the font size of the parent element?

Answer 11

em.

Question 12

Fill in the blank: The ___ property controls the vertical space an element occupies.

Answer 12

height.

Question 13

What is the purpose of the ‘overflow’ property?

Answer 13

It controls what happens to content that is too big to fit in an area.

Question 14

Multiple Choice: Which unit is best for defining a responsive layout? A) px B) % C) cm

Answer 14

B) %.

Question 15

True or False: ‘vh’ units are based on the height of the viewport.

Answer 15

True.

Question 16

What is the effect of setting ‘box-sizing: border-box;’?

Answer 16

Padding and borders are included in the element’s total width and height.

Question 17

What do ‘rem’ units represent?

Answer 17

Root em units, which are relative to the font size of the root element.

Question 18

Fill in the blank: To make an element take the full width of its container, set its width to ___ .

Answer 18

100%.

Question 19

What is the difference between ‘width’ and ‘max-width’?

Answer 19

‘width’ sets a fixed width, while ‘max-width’ restricts the maximum width an element can grow to.

Question 20

Multiple Choice: Which property would you use to prevent content overflow? A) width B) overflow C) display

Answer 20

B) overflow.

Question 21

True or False: CSS Grid can be used to create complex layouts without using floats.

Answer 21

True.

Question 22

What is a fluid layout?

Answer 22

A layout that uses percentage-based widths to adapt to the screen size.

Question 23

Fill in the blank: The ___ property defines how an element behaves when it is resized.

Answer 23

resize.

Question 24

What does setting ‘display: inline-block;’ do to an element?

Answer 24

It allows the element to have width and height while still flowing inline.

Question 25

True or False: CSS Flexbox is used for aligning items in a one-dimensional space.

Answer 25

True.

Question 26

What happens if you only set the width of an element and not the height?

Answer 26

The height remains auto, meaning it adjusts based on the content inside the element.

Question 27

How do you ensure an image never exceeds its parent container's width?

Answer 27

``` img { max-width: 100%; } ``` | This prevents the image from overflowing.

Question 28

How do you create a div that is at least 300px wide but does not exceed 80% of the screen width?

Answer 28

``` .box { width: min(80vw, 300px); } ``` | This ensures the width is at most 80vw but not smaller than 300px.

Question 29

How do you make a div exactly 50% of its parent's height?

Answer 29

``` .box { height: 50%; } ``` | The height will be half of the parent container’s height.

Question 30

How do you set a box to be square with a width of 200px?

Answer 30

``` .box { width: 200px; height: 200px; } ``` | This makes a fixed square.

Question 31

How do you maintain a 16:9 aspect ratio for a div?

Answer 31

``` .box { aspect-ratio: 16 / 9; width: 100%; } ``` | This ensures the height is calculated automatically to maintain 16:9.

Question 32

How can you make an element's width always be at least 300px but also take up 70% of the screen if possible?

Answer 32

``` .box { width: clamp(300px, 70vw, 1000px); } ``` | This ensures the width is at least 300px but scales up to 70% of the vie

Question 33

How do you create a responsive square that resizes with the viewport width?

Answer 33

``` .box { width: 30vw; aspect-ratio: 1 / 1; } ``` | This ensures the box always stays square while adapting to the viewport