Apreniendo visualmente html y css

Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja.

Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow.

Este es un texto que no excederá el tamaño de la caja pero de todas maneras se mostrará la barra de scroll

Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow. Este es un texto largo que excederá el tamaño de la caja y se mostrará con overflow.

Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja. Este es un texto largo que excederá el tamaño de la caja.

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

OVERFLOW VISIBLE:
.over1{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: visible;}

OVERFLOW AUTO:
.over2{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: auto;}

OVERFLOW SCROLL:
.over3{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: scroll;}

OVERFLOW X:
.over4{width: 250px; height:250px; border-color:red ; background-color: tomato; white-space: nowrap; overflow-x: scroll;}

OVERFLOW HIDDEN:
.over5{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: hidden;}

EJEMPLO:
.over6 { width: 250px; height:250px; background-color: darkcyan; border: 5px solid blue; overflow: hidden;}
#ej1 {width: 250px; height:250px; position: relative; top: 50px; left: 50px; transition: 1.5s;}
.over6:hover> #ej1 {position:relative ; left: 0; top: 0%; }

OVERFLOW VISIBLE: .over1{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: visible;}

OVERFLOW AUTO: .over2{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: auto;}

OVERFLOW SCROLL: .over3{width: 250px; height:250px; border-color:red ; background-color: tomato; overflow: scroll;}

OVERFLOW X: .over4{width: 250px; height:250px; border-color:red ; background-color: tomato; white-space: nowrap; overflow-x: scroll;}