Capitulo 5 Posicionamiento y visualización

Capitulo 5 Posicionamiento y visualización


Tipos de elementos

Los elementos en línea definidos por HTML son: 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.

Los elementos de bloque definidos por HTML son: addressblockquotecenterdirdivdlfieldsetformh1h2h3h4h5h6hrisindexmenunoframesnoscriptolppretableul.
Los siguientes elementos también se considera que son de bloque: dddtframesetlitbodytdtfootththeadtr.
Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: buttondeliframeinsmapobjectscript.

Posicionamiento normal

Es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. En este modelo, sólo se tiene en cuenta si el elemento es de bloque o en línea, sus propiedades width y height y su contenido.

Posicionamiento normal de los elementos en línea
Si las cajas ocupan mas espacio que tienen disponible, las otras cajas se mueven a las lineas inferiores

Posicionamiento relativo

Consiste en colocar la caja según el posicionamiento normal y después desplazar esta con respecto a su posición original

Ejemplo de posicionamiento relativo de un elemento

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.

Ejemplo de posicionamiento absoluto de un elemento

Posicionamiento fijo

Cuando una caja se posiciona fija, la forma de obtener sus coordenadas es igual que la absoluta, su principal característica es que su posición no se puede mover dentro de la ventana del navegador, esto hace que no se pueda modificar su posición

Posicionamiento flotante

Cuando una caja se posiciona con este modelo de posicionamiento se convierte en flotante, esta se desplaza hasta la zona mas cercana en la que originalmente se encontraba

Ejemplo de posicionamiento float de una caja

No hay comentarios.:

Publicar un comentario