position → define el tipo de posicionamiento.

Ejemplo: div { position: absolute; }

Valores: static | relative | absolute | fixed | sticky

top / right / bottom / left → mueven el elemento según su posición.

Ejemplo: div { top: 10px; left: 20px; }

z-index → controla el orden de apilamiento (qué elemento queda encima).

Ejemplo: div { z-index: 10; }

float → coloca el elemento a la izquierda o derecha.

Ejemplo: div { float: right; }

clear → controla cómo se comportan los elementos tras un float.

Ejemplo: div { clear: both; }

display → define cómo se muestra el elemento.

Ejemplo: div { display: inline-block; }

Valores: block | inline | inline-block | flex | grid | none

overflow → qué pasa si el contenido se desborda.

Ejemplo: div { overflow: hidden; }

Valores: visible | hidden | scroll | auto

visibility → oculta o muestra el elemento, pero mantiene el espacio.

Ejemplo: div { visibility: hidden; }

opacity → nivel de transparencia de un elemento.

Ejemplo: div { opacity: 0.5; }

clip / clip-path → recorta el área visible con formas.

Ejemplo: div { clip-path: circle(50%); }

object-fit → cómo se ajusta una imagen o vídeo dentro de su caja.

Ejemplo: img { object-fit: cover; }

object-position → posición de la imagen/vídeo dentro de su caja.

Ejemplo: img { object-position: top center; }

transform → mueve, rota o escala elementos.

Ejemplo: div { transform: rotate(45deg); }

display: flex → activa el modo Flexbox en un contenedor.

Ejemplo: div { display: flex; }

flex-direction → dirección principal de los elementos.

Ejemplo: div { flex-direction: row; }

Valores: row | row-reverse | column | column-reverse

justify-content → alinea los elementos en el eje principal.

Ejemplo: div { justify-content: space-between; }

Valores: flex-start | flex-end | center | space-between | space-around | space-evenly

align-items → alinea los elementos en el eje secundario.

Ejemplo: div { align-items: center; }

Valores: flex-start | flex-end | center | baseline | stretch

flex-wrap → permite que los elementos salten de línea.

Ejemplo: div { flex-wrap: wrap; }

Valores: nowrap | wrap | wrap-reverse

align-content → alinea varias líneas de elementos (cuando hay wrap).

Ejemplo: div { align-content: space-around; }

Valores: flex-start | flex-end | center | space-between | space-around | stretch

gap → espacio entre los elementos del flex.

Ejemplo: div { gap: 20px; }

flex-grow → define cuánto puede crecer un elemento dentro del contenedor.

Ejemplo: div { flex-grow: 1; }

flex-shrink → define cuánto puede encogerse un elemento si no hay espacio.

Ejemplo: div { flex-shrink: 0; }

flex-basis → tamaño inicial del elemento antes de aplicar grow/shrink.

Ejemplo: div { flex-basis: 200px; }

flex → shorthand de grow, shrink y basis.

Ejemplo: div { flex: 1 0 150px; }

order → cambia el orden visual de los elementos.

Ejemplo: div { order: 2; }

align-self → alinea un solo elemento de manera independiente.

Ejemplo: div { align-self: flex-end; }

display: grid → activa el modo Grid en un contenedor.

Ejemplo: div { display: grid; }

grid-template-columns → define las columnas.

Ejemplo: div { grid-template-columns: 200px 1fr 2fr; }

grid-template-rows → define las filas.

Ejemplo: div { grid-template-rows: 100px auto; }

gap → espacio entre filas y columnas.

Ejemplo: div { gap: 20px; }

row-gap / column-gap → espacio separado para filas o columnas.

Ejemplo: div { row-gap: 10px; column-gap: 20px; }

grid-column → controla cuántas columnas ocupa un elemento.

Ejemplo: div { grid-column: 1 / 3; }

grid-row → controla cuántas filas ocupa un elemento.

Ejemplo: div { grid-row: 2 / 4; }

justify-items → alinea el contenido de las celdas en el eje horizontal.

Ejemplo: div { justify-items: center; }

Valores: start | end | center | stretch

align-items → alinea el contenido de las celdas en el eje vertical.

Ejemplo: div { align-items: stretch; }

Valores: start | end | center | stretch

justify-content → alinea todo el grid en horizontal dentro del contenedor.

Ejemplo: div { justify-content: space-between; }

align-content → alinea todo el grid en vertical dentro del contenedor.

Ejemplo: div { align-content: center; }

place-items → shorthand de justify-items y align-items.

Ejemplo: div { place-items: center; }

place-content → shorthand de justify-content y align-content.

Ejemplo: div { place-content: center space-between; }

grid-area → define la posición de un ítem en filas y columnas.

Ejemplo: div { grid-area: 1 / 1 / 3 / 3; }

repeat() → repite columnas o filas fácilmente.

Ejemplo: div { grid-template-columns: repeat(3, 1fr); }

minmax() → define un tamaño mínimo y máximo.

Ejemplo: div { grid-template-columns: minmax(200px, 1fr); }

auto-fill → llena el espacio con el máximo número de columnas posibles.

Ejemplo: div { grid-template-columns: repeat(auto-fill, 200px); }

auto-fit → parecido a auto-fill, pero ajusta las columnas al espacio disponible.

Ejemplo: div { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

fr → unidad fraccional, reparte el espacio disponible proporcionalmente.

Ejemplo: div { grid-template-columns: 1fr 2fr; }

@keyframes → define los fotogramas de la animación.

Ejemplo:
@keyframes mover {
from { left: 0; }
to { left: 100px; }
}

animation-name → nombre de la animación definida con @keyframes.

Ejemplo:
div {
animation-name: mover;
}

animation-duration → duración de la animación.

Ejemplo:
div {
animation-duration: 2s;
}

animation-timing-function → curva de aceleración.

Ejemplo:
div {
animation-timing-function: ease-in-out;
}

animation-delay → tiempo de espera antes de iniciar.

Ejemplo:
div {
animation-delay: 1s;
}

animation-iteration-count → número de repeticiones.

Ejemplo:
div {
animation-iteration-count: infinite;
}

animation-direction → dirección de la animación.

Ejemplo: div {
animation-direction: alternate;
}

Valores: normal | reverse | alternate | alternate-reverse

animation-fill-mode → estado del elemento antes y después de la animación.

Ejemplo:
div {
animation-fill-mode: forwards;
}

animation-play-state → controla si la animación está corriendo o pausada.

Ejemplo:
div {
animation-play-state: paused;
}

animation → shorthand con todas las propiedades en una sola.

Ejemplo:
div {
animation: mover 2s ease-in-out 1s infinite alternate;
}

transition → propiedad abreviada para animar cambios.

Ejemplo:
div {
transition: all 0.5s ease;
}

transition-property → define qué propiedad se anima.

Ejemplo:
div {
transition-property: background-color;
}

transition-duration → tiempo que dura la transición.

Ejemplo:
div {
transition-duration: 0.3s;
}

transition-timing-function → curva de aceleración.

Ejemplo:
div {
transition-timing-function: ease-in-out;
}

Valores: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier()

transition-delay → retardo antes de empezar.

Ejemplo:
div {
transition-delay: 0.2s;
}

transition: none → desactiva todas las transiciones.

Ejemplo:
div {
transition: none;
}

transition multiple → varias propiedades a la vez.

Ejemplo:
div {
transition: background-color 0.3s, transform 0.5s;
}

cubic-bezier() → curva de animación personalizada.

Ejemplo:
div {
transition-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);
}

steps() → transición por pasos (frame a frame).

Ejemplo:
div {
transition-timing-function: steps(5);
}

@media → regla para aplicar estilos según el tamaño de pantalla o dispositivo.

Ejemplo: @media (max-width: 768px) {
body {
font-size: 14px;
}
}

max-width / min-width → aplican estilos cuando la pantalla es menor o mayor a un ancho específico.

Ejemplo:
@media (min-width: 1024px) {
div {
padding: 20px;
}
}

orientation → detecta la orientación de la pantalla.

Ejemplo:
@media (orientation: landscape) {
body {
background: lightblue;
}
}

aspect-ratio → aplica estilos según la relación de aspecto.

Ejemplo:
@media (aspect-ratio: 16/9) {
video {
max-width: 100%;
}
}

unidades relativas → se adaptan mejor que px fijos.

Ejemplo:
div {
width: 50%;
font-size: 2em;
}

Unidades: % | em | rem | vw | vh | vmin | vmax

clamp() → define un valor adaptable con mínimo, ideal y máximo.

Ejemplo:
h1 {
font-size: clamp(16px, 5vw, 32px);
}

container queries (CSS más moderno) → aplican estilos según el tamaño del contenedor, no del viewport.

Ejemplo:
@container (min-width: 400px) {
div {
font-size: 18px;
}
}

cursor → cambia el estilo del cursor.

Ejemplo: div {
cursor: pointer;
}

overflow-x / overflow-y → controlan el scroll en ejes separados.

Ejemplo: div {
overflow-x: scroll;
overflow-y: hidden;
}

object-fit → ajuste de imágenes/vídeos.

Ejemplo: img {
object-fit: cover;
}

object-position → posición de imagen/vídeo dentro de su caja.

Ejemplo: img {
object-position: top center;
}

clip-path → recorta elementos con formas.

Ejemplo: div {
clip-path: circle(50%);
}

filter → efectos visuales (blur, brillo, contraste, etc.).

Ejemplo: img {
filter: grayscale(100%);
}

backdrop-filter → efectos de fondo (vidrio esmerilado, blur detrás).

Ejemplo: div {
backdrop-filter: blur(5px);
}

box-shadow → sombra para cajas.

Ejemplo: div {
box-shadow: 4px 4px 10px gray;
}

text-shadow → sombra para textos.

Ejemplo: h1 {
text-shadow: 2px 2px 5px black;
}

resize → permite redimensionar elementos (ej. textareas).

Ejemplo: textarea {
resize: none;
}

pointer-events → controla la interacción con el puntero.

Ejemplo: div {
pointer-events: none;
}

will-change → avisa al navegador qué propiedades van a cambiar (optimización).

Ejemplo: div {
will-change: transform;
}