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