MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack. MERN Stack Interview Part 7 CSS Questions.
Q61. What is the difference between block element, inline element and inline-block element?
Block Elements: The block elements always start on a new line. They will also take space of an entire row or width. List of block elements are <p>, <h1>, <div>, <header>.
Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span>, <strong> and <img> tags.
Inline-Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides. One common use for using inline-block is for creating navigation links horizontally. Some examples of inline block elements are <input>, <button>, <select>, <textarea> etc.
Q62. Explain the CSS “box model” and the layout components that it consists of?
The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:
- Content
- Padding
- Border
- Margin
Q63. How you would tell the browser in CSS to render your layout in different box models?
The box-sizing property allows us to include the padding and border in an element’s total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height.
box-sizing: content-box | border-box | initial | inherit;Q64. What is CSS preprocessor?
Pre-processors extend CSS with variables, mixins, Interpolations, functions, operators, and many more other usable assets. Pre processor help writing reusable, easily maintainable and extensible codes in CSS.
Some famous CSS preprocessors are:
- SASS (SCSS)
- LESS
- Stylus
- PostCSS
Q65. What is the difference between “resetting” & “normalizing” CSS?
Resetting: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
Normalizing: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.
Q66. Explain CSS Block Formatting Context?
A BFC is an HTML box that satisfies at least one conditions:
- The value of float is not none.
- The value of position is neither static nor relative. The value of display is table-cell, table-caption, inline-block, flex, or inline-flex.
- The value of overflow is not visible.
Q67. What is the float property and what float do?
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.
Q68. Explain the purpose of clearing floats in CSS?
The clear property is directly related to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.
Q69. What are media queries? How could you apply css rules specific to a media?
Media queries are useful when you want to modify your site or app depending on a device’s general type such as print vs screen or specific characteristics and parameters such as screen resolution or browser viewport width.
Q70. What is the use of @media only screen?
It hide style sheets from older user agents.
MERN Stack Interview Part 7. MERN Stack Interview MongoDB Express React Node Javascript.
Read Also: MERN Stack Interview Questions & Answer Series Part 6