Modelo de formateo visual en las Css
| ||||||
Css se denomina modelo de formateo visual, y no es mas que el mecanismo que rige el comportamiento de las cajas generadas por los elementos de la página.
Sumario
Posicionamiento
La propiedad de CSS que define el posicionamiento del elemento se denomina position. El significado de cada uno de los posibles valores de position es el siguiente:
• static: es el posicionamiento que se utiliza por defecto y todos los elementos inicialmente se muestran de esta forma. No se tienen en cuenta los valores de las propiedades top, right, bottom y left.
• relative: la nueva posición del elemento se calcula a partir de la posición que tendría si no se utilizara la propiedad position. Las posiciones de los siguientes elementos no se ven afectadas por el desplazamiento de este elmento.
• absolute: la nueva posición del elemento se determina mediante las propiedades top, right, bottom y left. Los valores de esas propiedades indican la posición del elemento respecto de la posición de su elemento padre. La posición del siguiente elemento se calcula como si no existiera el elemento que se desplaza, ya que este último se desentiende por completo del posicionamiento normal.
• fixed: la nueva posición del elemento se calcula de forma idéntica al posicionamiento absoluto. La diferencia reside en que en el caso de fixed, el elemento no se mueve cuando se desplaza la ventana del navegador. En los medios visuales (como la pantalla) el elemento se muestra en una posición fija independiente del movimiento de la ventana del navegador. En los medios impresos el elemento se muestra en todas las páginas. Las 4 propiedades relacionadas con la propiedad position son las que determinan el desplazamiento de los elementos respecto de sus posiciones originales. CSS define para ello las propiedades top, right, bottom y left.
En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su elemento padre.
En cualquiera de los 2 casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura del elemento (propiedades top y bottom).
Posicionamiento normal
Los elementos de bloque forman lo que CSS denomina “contextos de formato de bloque”. En este tipo de contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento padre. La distancia de las cajas se controla mediante los márgenes verticales.
Los elementos en línea forman los “contextos de formato en línea”. En este tipo de contextos, las cajas se muestran una detrás de otra de forma horizontal comenzando desde la posición más a la izquierda del elemento padre. La distancia entre las cajas se controla mediante los márgenes horizontales.
Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas se muestran en las líneas siguientes. Si las cajas en línea ocupan un espacio menor que su propia línea, se puede controlar la distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas.
El posicionamiento relativo también se considera parte del posicionamiento normal. En este caso, el desplazamiento de una caja no afecta al resto, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su sitio original.
El posicionamiento relativo no influye en el resto de elementos de la página. La única incidencia que tiene el posicionamiento relativo sobre el resto de elementos, es que el elemento desplazado puede solaparse con otros elementos de la página.
Posicionamiento float
Una caja posicionada mediante la propiedad float, se desplaza hasta la zona más a la izquierda o más a la derecha de la línea en la que se debería mostrar si no se desplazara. Una caja desplazada mediante float no pertenece al posicionamiento normal de un documento, por lo que los elementos de bloques anteriores y posteriores se visualizan como si la caja desplazada no existiera.
Si en el anterior ejemplo la “Caja 1” se posiciona mediante un float: left Una caja posicionada mediante float influye en la disposición de todas las demás cajas. CSS permite definir si el resto de los elementos fluyen alrededor de la caja desplazada o no lo hacen.
Los elementos en línea que se encuentran al lado de las cajas desplazadas mediante float adaptan su anchura al espacio libre dejado por la caja desplazada. Si en la línea donde se encuentra la caja desplazada no existe sitio necesario para los contenidos de los elementos en línea, estos se visualizan en la línea inmediatamente inferior.
Los posibles valores de la propiedad determinan el posicionamiento del elemento y el comportamiento de los elementos adyacentes. Si se indica un valor left, el elemento se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, el elemento baja una línea y se muestra lo más a la izquierda posible en esa nueva línea). El resto de elementos adyacentes se adaptan y fluyen alrededor del elemento desplazado.
El valor right tiene un funcionamiento idéntico, salvo que en este caso el elemento se desplaza hacia la derecha. El valor none permite eliminar el posicionamiento y que el elemento se muestre en su posición original.
Los elementos que se encuentran alrededor de un elemento que ha sido posicionado mediante float, adaptan sus contenidos para que fluyan alrededor del elemento posicionado.
La principal motivación de la creación del posicionamiento mediante float fue precisamente la posibilidad de colocar imágenes alrededor de las cuales fluye el texto.
La flexibilidad de CSS permite controlar la forma en la que los contenidos fluyen alrededor de los contenidos posicionados mediante float. De hecho, en muchas ocasiones es admisible que el texto del primer párrafo fluya alrededor de una imagen, pero el resto de los párrafos deberían mostrarse en su totalidad y no fluyendo alrededor de la imagen.
Posicionamiento absoluto
El posicionamiento absoluto implica que el elemento desplazado sale por completo del flujo normal del documento y por tanto, la posición del resto de elementos se determina como si no existiera el elemento desplazado. La referencia del posicionamiento absoluto de un elemento es el primer elemento padre que esté posicionado. Si ningún elemento padre del elemento posicionado tiene establecido un posicionamiento, la referencia se toma respecto del documento HTML completo.
Fuentes
- Eguíluz Pérez Javier, Introducción a Css.
