Sizing Items in CSS Flashcards
What property is used to set the width of an element in CSS?
The width property.
True or False: The height property can take values in pixels, percentages, and em units.
True.
Fill in the blank: The CSS property that controls the size of text is called ___ .
font-size.
What is the default value of the box-sizing property?
content-box.
Which CSS unit is relative to the viewport width?
vw (viewport width).
What does the term ‘responsive design’ refer to?
Designing web pages that look good on all devices by using fluid grids and flexible images.
Multiple Choice: Which unit is NOT a length unit in CSS? A) px B) em C) bg
C) bg.
What CSS property is used to set the maximum width of an element?
max-width.
True or False: The value ‘auto’ for width allows the browser to calculate the width of an element.
True.
What does the ‘min-height’ property do?
It sets the minimum height of an element.
Which CSS unit is relative to the font size of the parent element?
em.
Fill in the blank: The ___ property controls the vertical space an element occupies.
height.
What is the purpose of the ‘overflow’ property?
It controls what happens to content that is too big to fit in an area.
Multiple Choice: Which unit is best for defining a responsive layout? A) px B) % C) cm
B) %.
True or False: ‘vh’ units are based on the height of the viewport.
True.
What is the effect of setting ‘box-sizing: border-box;’?
Padding and borders are included in the element’s total width and height.
What do ‘rem’ units represent?
Root em units, which are relative to the font size of the root element.
Fill in the blank: To make an element take the full width of its container, set its width to ___ .
100%.
What is the difference between ‘width’ and ‘max-width’?
‘width’ sets a fixed width, while ‘max-width’ restricts the maximum width an element can grow to.
Multiple Choice: Which property would you use to prevent content overflow? A) width B) overflow C) display
B) overflow.
True or False: CSS Grid can be used to create complex layouts without using floats.
True.
What is a fluid layout?
A layout that uses percentage-based widths to adapt to the screen size.
Fill in the blank: The ___ property defines how an element behaves when it is resized.
resize.
What does setting ‘display: inline-block;’ do to an element?
It allows the element to have width and height while still flowing inline.
True or False: CSS Flexbox is used for aligning items in a one-dimensional space.
True.
What happens if you only set the width of an element and not the height?
The height remains auto, meaning it adjusts based on the content inside the element.
How do you ensure an image never exceeds its parent container’s width?
img {
max-width: 100%;
}
This prevents the image from overflowing.
How do you create a div that is at least 300px wide but does not exceed 80% of the screen width?
.box {
width: min(80vw, 300px);
}
This ensures the width is at most 80vw but not smaller than 300px.
How do you make a div exactly 50% of its parent’s height?
.box {
height: 50%;
}
The height will be half of the parent container’s height.
How do you set a box to be square with a width of 200px?
.box {
width: 200px;
height: 200px;
}
This makes a fixed square.
How do you maintain a 16:9 aspect ratio for a div?
.box {
aspect-ratio: 16 / 9;
width: 100%;
}
This ensures the height is calculated automatically to maintain 16:9.
How can you make an element’s width always be at least 300px but also take up 70% of the screen if possible?
.box {
width: clamp(300px, 70vw, 1000px);
}
This ensures the width is at least 300px but scales up to 70% of the vie
How do you create a responsive square that resizes with the viewport width?
.box {
width: 30vw;
aspect-ratio: 1 / 1;
}
This ensures the box always stays square while adapting to the viewport
