CSS Flashcards
Can you describe the box model in CSS?
The CSS box model is a shorthand referring to the width, height, padding, border, and margin properties applied to an element with CSS.
These five properties make up how the browser calculates the size of the “box” that element takes up on the page, affecting the total size of the element, how it is positioned, and how it displaces other elements on the page.
What are the different ways you can use the position property in CSS?
static
relative
absolute
fixed
sticky
What is CSS selector specificity?
Specificity is the algorithm used by browsers to determine which CSS declaration is most relevant to a given element, to determine how to style it.
What’s the difference between “resetting” and “normalizing” CSS?
Both of them are ways to deal with built-in browser styling.
Resetting aims to remove it.
Normalizing aims to make it consistent across browsers.
Describe Floats and how they work.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
Describe z-index and how stacking context is formed.
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items.
Overlapping elements with a larger z-index cover those with a smaller one.
Which clearing techniques do you know of?
There are several techniques:
1. Adding overflow: auto to the container
2. Adding clear: both to a new element or pseudo element placed right after the container
3. Adding display: flow-root; to the container
The third option is the most modern and currently accepted one. See CSS Tricks article on this.
How would you approach fixing browser-specific styling issues?
Use media queries
Alternatively, reset or normalize your CSS to avoid the problem.
How do you serve your pages for feature-constrained browsers?
What techniques/processes do you use?
What are the different ways to visually hide content (and make it available only for screen readers)?
To make the content accessible by screen readers, you could use the aria-describedby or aria-labelledby attributes.
To visually hide it, you could either clip the content, push it out of the browsers’ visible viewport, or set them to be transparent.
What’s the use of media queries?
Media queries allow you to apply CSS styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width.
Explain how a browser determines what elements match a CSS selector.
From right to left
The browser starts at the right-most part of the selector and work its way up the DOM tree.
What is the difference between CSS Flexbos and Grid?
Flexbox was designed for one-dimensional layouts (either a row or a column).
Grid was designed for two-dimensional layouts (rows and columns at the same time).
What are the ways to position an element vertically?
Depending on the situation you may use vertical-align or flexbox.
