|
Question: What is the box model in CSS?
|
Answer: The box model is a fundamental concept in CSS that describes the layout and design of elements on a web page.
It consists of content, padding, border, and margin. The content area contains the actual content of the element,
padding adds space between the content and the border, the border surrounds the padding and content,
and margin provides space between the element and its neighboring elements.
|
|
Question: Can you explain the difference between inline and block elements in CSS?
|
Answer: The inline elements flow within the content and do not start on a new line.
Examples include <span>, <a>, and <img>.
Block elements, on the other hand, start on a new line and take up the full width available.
Examples include <div>, <p>, and <h1>.
|
|
Question: What is the purpose of the z-index property in CSS?
|
Answer: The z-index property specifies the stacking order of elements on a web page along the z-axis (depth).
Elements with a higher z-index value are displayed on top of elements with a lower z-index value.
It is commonly used to control the stacking order of positioned elements.
|
|
Question: How do you center an element horizontally and vertically in CSS?
|
Answer: To center an element horizontally, you can use margin: 0 auto; along with a specified width.
To center an element vertically, you can use the flexbox or grid layout, setting the container's display property to
flex or grid and using alignment properties like align-items and justify-content.
|
|
Question: What are media queries in CSS, and how are they used?
|
Answer: Media queries are CSS features that allow you to apply styles based on characteristics of the device,
such as screen size, resolution, and orientation.
They are commonly used in responsive web design to adapt
the layout and appearance of a website to different devices and screen sizes.
|
|
Question: Can you explain the difference between 'em' and 'rem' units in CSS?
|
Answer: Both em and rem are relative length units in CSS. em is relative to the font size
of the parent element, whereas rem is relative to the font size of the root element
(typically the <html> element).
Using rem can help maintain a more consistent and predictable layout, especially in complex designs.
|
|
Question: What is the difference between 'display: none;' and 'visibility: hidden;' in CSS?
|
Answer: The 'display: none;' removes an element from the document flow entirely,
making it invisible and not taking up any space on the page.
Whereas 'visibility: hidden;' hides an element from view but still occupies space in the layout.
The element is still present in the document flow.
|
|
Question: What is the CSS specificity and how does it work?
|
Answer: CSS specificity is a measure of how specific a selector is in targeting HTML elements.
It determines which styles are applied to an element when conflicting styles are defined.
Specificity is calculated based on the combination of selectors, including element type, class, ID, and inline styles.
The more specific a selector is, the higher its specificity, and the more precedence it has over other styles.
|