CSS: Layouts and Effects Flashcards
(27 cards)
What is CSS Overflow?
Overflow refers to the way elements handle content that exceeds, or “overflows”, the size of the containing element. Overflow is two-dimensional.
What is the “overflow-x” property?
The x-axis determines horizontal overflow.
What is the “overflow-y” property?
the y-axis determines vertical overflow.
What is the “overflow” shorthand property?
Shorthand property for overflow-x and overflow-y. If given one value, both overflows will use it. If given two values, the overflow-x will use the first, and the overflow-y will use the second.
What is the CSS Transform property?
This property enables you to apply various transformations to elements, such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space.
What is the “translate()” function?
This function is used to move an element from its current position.
What is the “scale()” function?
This function allows you to change the size of an element.
What is the “rotate()” function?
This function allows you to rotate an element.
What is the “skew()” function?
This function allows you to skew an element.
What are important points about the Transform property in relation to accessibility?
If you’re using transform to hide or reveal content, make sure that the content is still accessible to screen readers and keyboard navigation. Hidden content should be truly hidden, such as by using display: none or visibility: hidden, rather than simply being visually moved off-screen.
What is the CSS Box Model?
In the CSS box model, every element is surrounded by a box. This box consists of four components: the content area, padding, border, margin.
What is the Content Area?
The content area is the innermost part of the box. It’s the space that contains the actual content of an element, like text or images.
What is the “padding” property?
The padding is the area immediately after the content area. It’s the space between the content area and the border of an element.
What is the “border” property?
The border is the outer edge or outline of an element in the CSS box model. It’s the visual boundary of the element.
What is the “margin” property?
The margin is the space outside the border of an element. It determines the distance between an element and other elements around it.
What is Margin Collapse?
This behavior occurs when the vertical margins of adjacent elements overlap, resulting in a single margin equal to the larger of the two. This behavior applies only to vertical margins (top and bottom), not horizontal margins (left and right).
What is the “box-sizing” property?
This property is used to determine on the final width and height is calculated for an HTML element.
What is the “content-box” value?
In the content-box model, the width and height that you set for an element determine the dimensions of the content area but they don’t include the padding, border, or margin.
What is the “border-box” value?
With border-box, the width and height of an element include the content area, the padding, and the border, but they don’t include the margin.
What is CSS Reset?
A CSS reset is a stylesheet that removes all or some of the default formatting that web browsers apply to HTML elements. Third party options for CSS resets include sanitize.css and normalize.css.
What is the “filter” property?
This property can be used to create various effects such as blurring, color shifting, and contrast adjustment.
What is the “blur()” function?
This function applies a Gaussian blur to the element. The amount is defined in pixels and represents the radius of the blur.
What is the “brightness()” function?
This function adjusts the brightness of the element. A value of 0% will make the element completely black, while values over 100% will increase the brightness.
What is the “contrast()” function?
This function adjusts the contrast of the element. A value of 0% will make the element completely grey, 100% will make the element appear normally, and values greater than 100% will increase the contrast.
