Sem título

la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body.

Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:

Tamaños absolutos, utilizando px, cm, etc...

Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaños relativos a la fuente, utilizando em.

El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.

Tamaño

Al utilizar un elemento de bloque, como una capa, un párrafo, el body, etc... el tamaño depende del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué pasa si el contenido del elemento (texto, imágenes, etc...) no cabe?

Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores:

visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.

hidden. Lo que no quepa en el elemento, queda oculto.

auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.

scroll. Siempre muestra las barras de desplazamiento.

El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo.

Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del otro. A este posicionamiento se le denomina estático.

Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:

static. Es el normal.

relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.

absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.

fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto produce que un elemento quede oculto.

posicionamiento,

maquetación prediseñada)

Desbordamiento

PROCEDIMIENTOS DE MAQUETACION