Los estilos de las cajas en CSS3

Las nuevas propiedades CSS3

De todas las novedades de CSS3, son las nuevas propiedades para el diseño de las cajas las que han generado un mayor entusiasmo y más reacciones de júbilo entre los diseñadores web. Todos soltaron un suspiro de alivio: ***por fin vamos a poder aplicar bordes redondeados, degradados, sombras y transparencias a las cajas "div"***.

El tamaño de las cajas

  1. Con CSS 2.1
    Como usted sabe, con CSS 2.1, el tamaño necesario para la visualización de una caja tiene en cuenta los márgenes (margin), los bordes (border), el espaciado (padding) y el contenido (width).
  2. Con CSS3
    En CSS3, con la propiedad box-sizing, usted podrá indicar que los valores de border y de padding se incluyan en el tamaño de width. Esta propiedad acepta dos valores:
    • content-box: el ancho de la caja se calcula en función del tamaño del contenido, del borde y del espaciado, como en CSS 2.1. Se trata del valor predeterminado.
    • border-box: el ancho de la caja incluye el tamaño del contenido, del borde y del espaciado.

El desbordamiento de contenido

Los estilos CSS 2.1 nos permiten usar la propiedad overflow para gestionar el contenido cuando este último es mayor que el contenedor. Se trata del famoso principio del "desbordamiento de contenido".
CSS3 nos propone dos nuevas propiedades para gestionar el desbordamiento:

Los valores posibles son los mismos que en CSS 2.1:

# IMDB Top 10 Movies Year
1 The Shawshank Redemption 1994
2 The Godfather 1972
1 The Shawshank Redemption 1994
2 The Godfather 1972


# IMDB Top 10 Movies Year
1 The Shawshank Redemption 1994
2 The Godfather 1972

Esta página es para que realicen una práctica de selectores, no se está trabajando en el diseño de la misma... sino en que pueda notar la aplicación de los estilos