Please enable JavaScript.
Coggle requires JavaScript to display documents.
css, overflowing, positioning, transform, elements, measurments units,…
css
border
border width
boder radius
border side
top
right
bottom
left
border-style
groove
hidden
double
dotted
dashed
inherit
border-color
box model
padding
space between content and border
border
content
margin
space between each elements
box sizing
content-box
border-box
colors
RGB
HSL
named colors
hegxadecimal
gradients
radial
linear
shadow
box shadow
text shadow
overflowing
hidden
auto
scroll
visible
positioning
relative
relative to the elements normal position
absolutley
relative to the container position
fixed
relative to the viewport position
transform
rotate
rotatey
rotatez
rotatateX
rotate3d
translate
translateZ
translateX
translate3d
translateY
skew
skewX
skewY
elements
block-level
p
h1 to h6
div
body
by default the body element have the 100% in width and height of the screen
inline
span
measurments units
absolute(the size is fixed.value dosent change)
pt
inc
px
commonly used
cm
mm
relative(the value relative to something else)
relative to the size of view port
vw
vh
relative to the size of the parent element
%
relative to the size of the font
em
rem
flex-box
these properties must apply on the container of multiple elements
flex-direction
row-reverse
rtl
row
defaulf-->ltr
column-reverse
bto
column
default-->otb
flex-alignment
align-itms
use to align items to the cross axis
align-content
justify-content
use to align items to the main axis
if we set the direction on the row the main axis is horizontal
if we set the direction on the column the main axis is vertically
flex-wrap
nowwrap(default)
all items will fit in one line .they will get smaller.no matter how many they are
wrap
items will keep the original size and the any addtional items will align to the new line.
we can also align single item by appling "align-item"property to single element.
sizing elements(these properties should apply in the item rol)
flex-grow
flex-shrink
flex-basis
types of images
raster(define by pixels)
vector(define by mathemathical vectors)