Índice
Anterior
Siguiente
Versión Imprimible
Autores
Volver

7. Efectos de desbordamiento, recorte y visibilidad.

Existen propiedades que permiten aplicar algunos efectos visuales en la página: recortar una parte de la caja de un elemento, especificar el comportamiento para los casos en que el contenido de un elemento es mayor que su tamaño y provocar que un elemento sea invisible.

Generalmente el contenido de una caja de bloque se mantiene dentro de los límites de la caja, pero puede suceder que el contenido desborde esos límites y quede parcial o totalmente fuera de la caja.

Esto puede suceder si especificamos un tamaño determinado para un elemento (con las propiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grande para las medidas adjudicadas. También puede darse al utilizar márgenes negativos o posiciones absolutas para el elemento.

Cuando se produce un desbordamiento, la propiedad 'overflow' especifica si la caja es recortada y (en caso afirmativo) cómo será recortada. La propiedad 'clip' especifica el tamaño y la forma de la zona de recorte.

Propiedad overflow.

Sintaxis: overflow: <valor>
Valores posibles: visible | hidden | scroll | auto | inherit
Valor inicial: : visible
Se aplica a: Los elementos a nivel de bloque y reemplazados
Heredado: No

Esta propiedad especifica si el contenido de un elemento a nivel de bloque es recortado cuando desborda la caja del elemento. Los valores tienen los siguientes significados:

visible
Este valor indica que el contenido no es recortado, es decir, puede ser procesado fuera de la caja de bloque.
hidden
Este valor indica que el contenido es recortado y los usuarios no tendrán acceso al contenido recortado. El tamaño y forma de la zona de recorte son especificados por la propiedad 'clip'.
scroll
Este valor indica que el contenido es recortado y el navegador debe proporcionar un mecanismo de desplazamiento que permanecerá siempre visible (aunque la caja no tenga parte de su contenido recortado).
auto
El comportamiento del valor 'auto' depende del navegador, pero significa que éste debe proporcionar un mecanismo de desplazamiento para las cajas desbordadas.

Propiedad clip.

Sintaxis: clip: <valor>
Valores posibles: <forma> | auto | inherit
Valor inicial: auto
Se aplica a: Los elementos a nivel de bloque y reemplazados
Heredado: No

Una zona de recorte define qué porción del contenido de un elemento es visible. De manera predeterminada, la zona de recorte tiene el mismo tamaño y forma que la caja del elemento. Sin embargo, la zona de recorte puede ser modificada por la propiedad 'clip'.

La propiedad 'clip' se aplica a elementos que tienen una propiedad 'overflow' con un valor diferente a 'visible'. Los valores tienen los siguientes significados:

auto
La zona de recorte tiene el mismo tamaño y ubicación que la(s) caja(s) del elemento.
<forma>
En CSS2, el único valor permitido para es: rect (<arriba>,<derecha>,<abajo>,<izquierda>).
Los valores para <arriba><derecha><abajo> e <izquierda>pueden ser una <medida> o 'auto'. Las medidas negativas están permitidas y 'auto' significa lo mismo que '0' (cero).