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.ctw-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.

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:

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

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