Más propiedades CSS

En CSS hay propiedades especiales que permiten:

• recortar una parte de un elemento
• determinar qué debe hacer el navegador si el contenido de un elemento es mayor que su tamaño
• provocar que un elemento sea invisible
  

Por lo general, cuando colocamos un elemento (un texto, una imagen) dentro de un bloque, dimensionamos el bloque para que el elemento se mantenga dentro de los límites de ese bloque, pero, puede suceder que el contenido desborde esos límites y quede parcial o totalmente fuera de él.

Por ejemplo, esto ocurrirá si el bloque tiene definidas las propiedades width y height, y su contenido resulta demasiado grande o si utilizamos márgenes negativos o posiciones absolutas para el elemento.

Esto provoca lo que se llama un desbordamiento. La propiedad overflow nos permite controlar el comportamiento de estos elementos:

overflow: [ visible | hidden | scroll | auto ]

donde:

visible: el contenido no es recortado (es el valor por defecto)
hidden: el contenido es recortado y los usuarios no tendrán acceso al contenido recortado
scroll: el contenido es recortado y el navegador mostrará barras de desplazamiento
auto: depende del navegador, por lo general es similar a scroll

Ejemplos utilizando una imagen de 120x116 pixeles dentro de la siguiente estructura:

<div style="
         border: 1px solid #BBCCDD;
         width: valor; height: valor;
         overflow: valor;">
    <img src="URL_imagen" />
</div>

DIV sin propiedades
width: 200px; height: 150px;
En todos los casos width: 100px; height: 100px;
overflow: visible;	overflow: hidden;	overflow: scroll;

Cuando se produce un desbordamiento y con la propiedad overflow se especificó algún tipo de recorte, la propiedad clip nos permite establecer el tamaño y la forma de ese recorte:

clip: [ rect | auto ]

donde:

auto: la zona de recorte tiene el mismo tamaño y ubicación que el bloque
forma: rect(top right down left) que pueden automáticas (0), positivas o negativas

Para los establecer los valores top, right, down, left se debe considerar 0,0 al ángulo superior izquierdo del elemento, de tal manera, un valor en top "cortará" todo lo que esté por encima, uno en botoom, todo lo que esté por debajo, un valor en left todo lo que esté a la izquierda y un valor en right todo lo que esté a la derecha.

Hay dos condiciones necesarias para usar esta propiedad:

• el elemento debe ser visible (propiedad visibilty)
• la posición debe ser absoluta (propiedad position:absolute;)

Actualmente, en CSS, las zonas recortadas siempre son rectangulares pero se estima que en el futuro admitirá otro tipo de "recortes",

Por último, la propiedad visibility especifica si los bloques son mostrados, pero hay que tener en cuenta que, aunque el elemento sea invisible sigue afectando la composición de la página, es decir, continúa ocupando su espacio:

visibility: [ visible | hidden | collapse ]

donde:

visible: el elemento es visible
hidden: el elemento es invisible (transparente)
collapse: si se usa en otros elementos que no sean filas o columnas de una tabla, collapse tiene el mismo significado que hidden

OCULTAR

MOSTRAR