MERN Stack Interview Questions & Answer Series Part 6

Posted on July 4, 2023 By

MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack. MERN Stack Interview Part 6 CSS Questions.

Q51. What is the difference between class selectors & id selectors?

The difference between an ID and a class is that an ID (“#”) can be used to identify one element, whereas a class (“.”) can be used to identify more than one.

<h1 id="up" >Programming Tips & Tricks</h1>
<p class="down">Let's Crack any Interview</p> <p class="down">Welcome to WebDeveloperGuide</p>

Q52. What is the diffrence between css grid and flexbox?

A core difference between CSS Grid and Flexbox is that, CSS Grid’s approach is layout-first while Flexbox’ approach is content-first. If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.

Q53. What is CSS BEM?

The BEM (Block Element Modifier) methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues.

Q54. What are CSS sprites?

CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons.

Q55. What is tweening in css?

The pose-to-pose option is to create a few keyframes throughout the sequence, and then fill in the gaps later. Filling in these gaps is known as tweening.

Q56. Explain the difference between visibility: hidden; and display: none;? What are the pros and cons of using display:none?

Visibility:hidden – Simply hides the element but it will occupy space and affect the layout of the document.

Display: none – Removes the element from the normal layout flow (causes DOM reflow). It will not affect the layout of the document nor occupy space.

Q57. What is the purpose of the z-index and how a stacking context is formed?

An element with a higher z-index is always stacked above than a lower index.

Q58. Does overflow: hidden create a new block formatting context?

Yes. overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).

Q59. How would you approach fixing browser-specific styling issues?

.box {
  -moz-border-radius: 15px; /* Firefox */ 
  -webkit-border-radius: 15px; /* Safari and Chrome */ 
   border-radius: 15px;

Q60. What are the differences between relative and absolute in CSS?

Relative Position: An element with position relative is positioned relative to its normal position.

Absolute Position: An element with position absolute will cause it to adjust its position with respect to its parent. If no parent is present, then it uses the document body as parent.

MERN Stack Interview Part 6. MERN Stack Interview MongoDB Express React Node Javascript.

Leave a Reply

Your email address will not be published. Required fields are marked *