APRENDE CSS DE FORMA VISUAL

Explorá el diseño web a través de ejemplos visuales y claros

Secciones
Border
Padding
Margin
Position Relative
Position Absolute
Position Fixed
Position Sticky
Display Block
Inline
Inline-Block
Overflow
Float
Display: Flex

 

BACKGROUND COLOR:
.caja1 {width: 150px; height:150px; background-color:red ;}
.caja2{width: 150px; height:150px; background-color: yellow;}

caja1 de 150 x 150
caja2 de 150 x 150

 

PADDING:
.caja11 {width: 150px; height:150px; .... padding: 0px;}
.caja21 {width: 150px; height:150px; .... padding:20px;}
.caja31 {width: 150px; height:150px; .... padding:40px;}

caja11 de 150 x 150
caja21 de 150 x 150
caja31 de 150 x 150

 

BORDER:
.caja12 {width: 150px; height:150px; .... border: 20px solid blue;}
.caja22 {width: 150px; height:150px; .... border: 10px solid lightblue;}

caja12 de 150 x 150
caja22 de 150 x 150

 

MARGIN EJE X:
.caja13 {width: 150px; height:150px; .... margin: 0px 0px;}
.caja23 {width: 150px; height:150px; .... margin: 0px 20px}
.caja33 {width: 150px; height:150px; .... margin: 0px 40px}

caja13 de 150 x 150
caja23 de 150 x 150
caja33 de 150 x 150

 

MARGIN EJE Y:
.caja43 {width: 150px; height:150px; .... margin: 0px 0px;}
.caja53 {width: 150px; height:150px; .... margin: 20px 0px}
.caja63 {width: 150px; height:150px; .... margin: 40px 0px}

caja43 de 150 x 150
caja53 de 150 x 150
caja63 de 150 x 150

 

POSITION RELATIVE:
.caja14 {width: 150px; height:150px; .... position:relative; top: 20px ; right:20px;}
.caja24 {width: 150px; height:150px; .... position:relative;}
.caja34 {width: 150px; height:150px; .... position:relative;}
.caja44 {width: 150px; height:150px; .... position:relative; left:20px;bottom:20px;}

caja14 de 150 x 150
caja24 de 150 x 150
caja34 de 150 x 150
caja44 de 150 x 150

 

POSITION ABSOLUTE:
.contenedor {width : 400px; height: 400px; background-color: grey; position: relative;}
.caja15 {width: 150px; height:150px;...position:absolute;left:0}
.caja25 {width: 150px; height:150px;...position:absolute;right:0;}
.caja35 {width: 150px; height:150px;...position:absolute;bottom:0;}
.caja45 {width: 150px; height:150px;...position:absolute;bottom:0;right:0}
.caja55 {width: 60px; height:60px; ...position:absolute; top:0; left:0 ;bottom:0; right:0; margin:auto;}

caja15 de 150 x 150
caja25 de 150 x 150
caja35 de 150 x 150
caja45 de 150 x 150
caja55