Cheat Sheet. Conceptos basicos HTML y CSS

CSS

Positioning

Propiedades Descripcion
Z-index Modifica la posicion en el eje z de los elementos, por asi decirlo.
Fixed Fuerza un elemento a quedarse en una posición, fuera del HTML flow.
Absolute Cambia la posición de un elemento en base a coordenadas.
Relative Cambia la posición de un elemento desde su posición original.
Float Determina qué tan lejos a la izquierda / derecha debe flotar un elemento dentro de su elemento padre.
Block-level TOcupa todo el tamaño del contenedor, margin, padding, width funcionan.
Inline Permite que elementos esten en la misma linea; margin, padding & width no funcionan.
Inline-block Permite elementos tipo block en la mismalinea; margin, padding & width funcionan.

The Box Model

Box-Model
Propiedades Descripcion
Content-box La matemática de cálculo del cuadro predeterminado coloca el relleno, el borde fuera del ancho establecido en CSS.
border-box Simplifica la matemática receptiva al hacer que el ancho de un cuadro, como se establece en CSS, no cambie agregando relleno y borde.
padding El relleno es el espacio entre el área de contenido y el borde. Se puede configurar en píxeles o en porcentaje.
Margin El margen es la cantidad de espacio fuera del borde de un elemento.
overflow Controla cómo se tratan los elementos que rompen los bordes de la caja.

Ejemplo de transision CSS