CSS Box model:

 The box model for css defines following attributes

 Margin
 Padding
 Border
 Width
 Height

margin

Its sets space between space border amd page the attributes are:

Attribute Description
Margin Short hand all directions
Syntax:
Margin:top,left,bottom
Ex:
Margin:50px,100px,30px,100px

Padding:

Its sets border and content attributes:

Padding

Padding-left

Padding-right

Padding-top

Padding-bottom

Border:

Its sets border for content but attributes

Short hand for width, style and color

Border-width: pixels

Border-style: double, dotted, solid, groove, dashed etc.

Border-radius: short hand all directions

Border-top-left-radius
Border-image: URL

() stretch space size

Syntax:

Div.

Border: 10px solid transparent;

Border-image: URL (“.../public/images/border.png”)stretch 90;

Css positions
Relative

Absolute

Fixed

Sickly

Static

Static:

Its keeps the element according to document flow will not remove its flow

Its not allow thwe change the position left,right,top,bottom

It is default position for elemen that is static

Absolute:

Its removie

Its allows the position right ,positions

It can fix an element to cintent the page and scrolls along with content

Fixed:

It is similar to absolute but locks scrolling

Element position is on the page

Sticky:

Vvit keeos element according to normal flow of document it can strict the element after reaching
specified point

It locks the scrolling the element after strictly

Relative:
It keep the element according to normal flow of document

In changes the position top, right, left, bottom rescoring elopement

It is used to consents overlapping the page you can send forwards and backward in any element

We send bring forward and behind in any element

We can change the position of index trading the zero which means back