Professional Documents
Culture Documents
Grid Flex
CSS Grid layout is a The CSS Flexbox offers a
two-dimensional grid-based layout one-dimensional layout. It is helpful
system with rows and columns, in allocating and aligning the space
making it easier to design web among items in a container. It works
pages without having to use floats with all kinds of display devices and
and positioning. screen sizes.
The Grid layout is designed for The flexbox layout is best suited to
larger-scale layouts that are not application components and
linear in design small-scale layouts.
CSS Grid deploys fractional Flex direction allows developers to
measure units for grid fluidity and align elements vertically or
auto-keyword functionality to horizontally.
automatically adjust columns or
rows.
CSS grids are for 2D layouts. It Flexbox works better in one
works with both rows and columns. dimension only.
Question No. 2: Explain CSS position property? What are some
differences between absolute position and relative position?
Answer:
CSS position property:
The position property-specifics the type of positioning method used for
an element (static, relative, absolute, fixed, sticky).
Question No. 3: What is a box model? And what are the different
elements of a box model?
Answer:
Box model:
The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and the
actual content.
Answer:
Hover effect:
The hover selector is used to select elements when you mouse over
them. The hover: CSS pseudo-class matches when the user interacts
with an element with a pointing device. But does not necessarily activate
it. It is generally triggered when the user hovers over an element with the
cursor (mouse pointer).
CSS Selectors:
CSS selectors are used to “find” the HTML element you want to style.
I can divide CSS selectors into five categories:
● Simple selectors (select element based on name, id, class)
● Combinator selectors (select element based on a
specific relationship between them)
● Pseudo-class selectors (selector elements based on a
certain state)
● Pseudo-element selectors (select and style a part of
an element)
● Attribute selectors (select element based on an
attribute or attribute value)
Question No. 6: What is CSS Specificity?
Answer:
Example:
@media only screen and (max-width: 700px) {
body{
Background-color: blue;
}
}
Question No. 10: How will you make font size responsive?
Answer: The text size can be set with a vw unit, which means the
“viewport width”.
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Overlapping may occur while using CSS for positioning HTML element. Z
index helps in specifying the overlapping element. It is a number which
can be positive or negative, the default value being zero.
Question No. 19: How can the gap under the image be removed?
Answer:
Example:
img {
display: block;
}