CSS

Question 1

pseudo selector

Answer 1

Pseudo-classes are appended right after the main selector with a colon

Question 2

box model

Answer 2

content => padding => border => margin

CSS box model calculates the total width and height of the element by taking padding and border values into account like so:

Question 3

display: inline

Answer 3

default behavior take as much space as in need

cant set with

Question 4

display: block

Answer 4

break into new line, can set width

Question 5

display: inline-block

Answer 5

behavior of both inline and block, it can be set width but also display inline next to each other

Question 6

position:static;

Answer 6

which means that they aren’t positioned at all,

element take space one after the other

Question 7

position: relative

Answer 7

like position static but take up space as it needs, left, right, top, bottom
refer to the original position of the element

Question 8

position: absolute

Answer 8

When you position an element absolutely, it no longer takes up the space it used to and is now essentially ‘floating’ on your screen, above the surrounding elements.

Question 9

flexbox

Answer 9

designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities (either row or column)

Question 10

grid

Answer 10

two dimensional structure that also offer space distribution and alignment using cols and rows