Crea tu Web: Indice de diseño

Modelo de cajas

Los bloques o cajas en CSS3 permiten aún más posibilidades, se pueden crear con esquinas redondeadas, con sombras, redimensionables. Pero aún tienen más posibilidades como estás que tienes en este capítulo

Box Sizing

Nos permite controlar el modo en el que el navegador maneja el modelo de cajas, concretamente la forma de medir las dimensiones de un bloque o caja. Funciona en todos los navegadores (mozilla necesita el prefijo -moz-)

div.cajadim
{
box-sizing:border-box;
-moz-box-sizing:border-box;

width:300px;
height: 90px;
border:5px solid red;
padding: 10px;
}

Este atributo puede tener los siguientes valores

  • content-box: al ancho del bloque se le suman los bordes y el padding.
  • border-box: las dimensiones dadas al bloque incluyen el borde y el padding.
  • inherit: como simpre, hereda el comportamiento del elemento padre del actual.
Por ejemplo este bloque tiene la clase definida según el ejemplo

En este otro usamos esta content-box como valor de box-sizing. El ancho (300px) se refiere solo al contenido, el navegador suma borde y padding

Doble borde

Esta propiedad amplía la propiedad outline de CSS2 y permite que un bloque o caja poseea un borde extra por fuera del borde definido con la ya conocidad propiedad border. No funciona en Internet Explorer. Asi que si estás con Mozilla y aplicas esta clase a un bloque div verás un borde extra:

.bordedoble
{
border:2px solid black;
outline:2px solid red;
width: 300px
outline-offset:15px;
}

Esta es la muestra para aplicar esta clase ¿lo ves?


En internet explorer verás los dos bordes pegados: el interno (definido con border) y el externo (definido con outline).
arriba


Comunidad Virtual. Alojamiento gratis