Propiedades de Posicionamiento

Valores disponibles: static, fixed, absolute, relative

absolute: Elimina el elemento del flujo normal. Las propiedades top, bottom, left y right establecen posición absoluta relativa al contenedor más cercano con posición no estática. Si top y bottom coexisten, top prevalece. Mismo comportamiento para left sobre right.

relative: Conserva su espacio en el flujo. Las propiedades de desplazamiento (top, left, etc.) se calculan respecto a su posición original. Top anula bottom, left anula right.

Nota: Cuando un ancestro tiene position:relative, los elementos absolutos se posicionan relativos a él.

Manejo de Floats

Valores: left, right, none, inherit. Causan colapso de contenedores padres.

Métodos para limpiar floats:

• Altura fija en contenedor padre (requiere dimensiones conocidas)
• Elemento vacío con clear:both (genera marcado innecesario)
• overflow:hidden/auto en contenedor padre (requiere ancho definido)
• Pseudoelemento ::after con clear:both (solución moderna)

Ejemplo con Pseudoelemento:

.contenedor::after {
  content: "";
  display: table;
  clear: both;
}
.contenedor {
  zoom: 1; /* Soporte para IE */
}

Unidades de Medida

• px: Valor absoluto en píxeles
• em: Relativo al tamaño de fuente del elemento padre
• rem: Relativo al tamaño de fuente del elemento raíz (html)

Conversión práctica: 1em = 16px (valer por defecto en navegadores).

Propiedades CSS3 Avanzadas

Transiciones

.elemento {
  transition: background-color 0.5s ease-in-out;
}
.elemento:hover {
  background-color: #3498db;
}

Transformaciones 2D/3D

.rotar {
  transform: rotate(45deg) scale(1.2);
}
.trasladar {
  transform: translateX(50px) translateY(-20px);
}

Degradados

.lineal {
  background: linear-gradient(135deg, #1abc9c, #3498db);
}
.radial {
  background: radial-gradient(#e74c3c, #f39c12);
}

Sombras y Bordes

.sombra-caja {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}
.borde-redondeado {
  border-radius: 15px;
}

Animaciones con Keyframes

@keyframes desplazamiento {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.animado {
  animation: desplazamiento 3s infinite;
}

Etiquetas Meta

Proveen metainformación del documento. Atributos principales:

• name: Define tipo de metadato (description, keywords)
• http-equiv: Emula cabeceras HTTP
• content: Contenido asociado (obligatorio)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">