Pixela
Creamos experiencias digitales
CSS:
Posicionamiento y visualización
Factores
- Propiedades width y height
- Tipo de cada elemento
- Posicionamiento de la caja
- Relaciones entre los elementos
- Otro tipo de información
Tipos de elementos
El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.
Debido a este comportamiento, el tipo de elemento influye de forma decisiva.
Elementos en línea
a, abbr, acronym, b, basefont, bdo, big, br, cite,code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong,sub, sup, textarea, tt, u, var.
Elementos de bloque
address, blockquote, center, dir, div, dl,fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table,ul.
Posicionamiento
- CSS permite modificar la posición automática de cada caja.
- Existen 5 tipos de posicionamiento:
- Normal
- Relativo
- Absoluto
- Fijo
- Flotante
- La propiedad position cambia el posicionamiento.
Propiedad position
La propiedad position no permite controlar el posicionamiento flotante. Además la propiedad position sólo indica cómo se posiciona un caja, pero no la desplaza
Posicionamiento normal
Se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario
Posicionamiento relativo
Variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.
Posicionamiento absoluto
La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.
Posicionamiento fijo
Variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla es la misma e independiente.
Posicionamiento flotante
Se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.
Visualización
CSS define otras cuatro propiedades para controlar su visualización:
- display
- visibility
- overflow
Visualización
CSS define otras cuatro propiedades para controlar su visualización:
- display
- visibility
- overflow
Recuerda que...
... lo más importante es practicar practicar practicar
Ejercicio
- Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la imagen:
CSS Posicionamiento y visualizacion
By Pixela
