CSS Questions.
Q.1 What’s Box Model in CSS?
The CSS box model is a container that contains multiple properties including borders, margins, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
content: This contains the actual data in the form of text, images, or other media forms and it can be sized using the width & height property.
padding: This property is used to create space around the element, inside any defined border.
border: This property is used to cover the content & any padding, & also allows setting the style, color, and width of the border.
margin: This property is used to create space around the element ie., around the border area
Q.2 What are the Different Types of Selectors in CSS & what are the advantages of them?
A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to their id, class, type, attribute, etc.
CSS selectors: There are many basic different types of selectors.
Simple Selector: It is used to select the HTML elements based on their element name, id, attributes, etc.
Group Selector
Q2.What is VW and VH?
To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen. And of course, VW stands for “viewport width”, which is the viewable screen's width.
Q.4 Whats difference between Inline, Inline Block and block ?
inline - The element doesn’t start on a new line and only occupy just the width it requires. You can’t set the width or height.
inline-block - It’s formatted just like the inline element, where it doesn’t start on a new line. BUT, you can set width and height values.
block - The element will start on a new line and occupy the full width available. And you can set width and height values.
Q.5 How is Border-box different from Content Box?
box-sizing: border-box; Note :- when using box-sizing : content-box; the content size remain same while border-box size grows as padding and border grow. but when using box-sizing: border-box; the size of border-box remains same while size of content decreases as padding and border grow
Q.6 What’s z-index and How does it Function ?
Z Index (z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.
Note: Z index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Q.7 What’s Grid & Flex and difference between them?
Grid:CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns, making it easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row.
Flexbox: The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.
To get started you have to define a container element as a grid with display: flex;
Q.8 Difference between absolute and relative and sticky and fixed position explain with example.
Relative Position: Setting the top, right, bottom, and left properties of an element with position: relative; property will cause it to adjust from its normal position. The other objects or elements will not fill the gap.
Syntax:
position: relative;
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.
position: absolute;
Fixed Position:Position: fixed; property applied to an element will cause it to always stay in the same place even if the page is scrolled. To position the element we use top, right, bottom, left properties.
Syntax:
position: fixed;