Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 75

Otra propiedad incorporada en CSS3, que guarda relación con la estructura y el Modelo de caja tradicional, es la llamada box-sizing, que permite cambiar la forma en la que el tamaño de un elemento es calculado y obliga a los exploradores a incluir el relleno y el borde con su valor original.

Recordará que cada vez que calcula el área total ocupada por un elemento, el navegador utiliza la siguiente fórmula: size+margin+padding+borders. Por tanto, si la propiedad width tiene un valor de 100 px, margin tiene un valor de 20 px, padding tiene un valor de 10 px y border tiene un valor de 1 px, el área horizontal total ocupada por el elemento será de 100 + 40 + 20 + 2 = 162 px.

Observe que hemos tenido que duplicar los valores de las propiedades margin, padding y border para tomar en cuenta los valores que utilizados a la izquierda ya la derecha de la caja. Esto significa que cada vez que se declara el tamaño de un elemento con la propiedad width, es necesario tomar en cuenta que el verdadero espacio necesario para colocar el elemento suele ser mayor.

En ocasiones puede ser recomendable forzar al navegador a incluir los valores de padding y border en el valor la propiedad width, de manera que la nueva fórmula será igual size+margin.

Código 2-40

Incluye relleno y borde en el tamaño del elemento.

La propiedad box-sizing puede tomar uno de tres valores. De forma predeterminada se establece el valor content-box, que indica que el navegador agregará los valores de padding y border al tamaño especificado por la propiedad width. Por otra parte, el valor padding-box incluirá el valor de padding dentro del elemento y border-box incluirá también el borde de la caja.

El Código 2-40 muestra la aplicación de esta propiedad a un elemento <div>. Se trata solo de un ejemplo que no vamos a utilizar en nuestro documento, pero podría ser útil para algunos diseñadores dependiendo de qué tan familiarizados están con los métodos tradicionales de cálculo utilizados en las versiones anteriores de CSS.

Importante

Debido a que las propiedades CSS que estamos estudiando son aún experimentales, muchas deben ser declaradas con un prefijo específico de acuerdo con el motor de procesamiento. En el futuro estaremos en condiciones de declarar solo box-sizing: border-box, pero mientras no haya terminado esta fase experimental tenemos que utilizar una regla similar a la del Código 2-40.

Los prefijos para los navegadores más comunes son:

• -moz-: para Mozilla Firefox.

• -webkit-: para Safari y Google Chrome.

• -o-: para Opera.

• -khtml-: para Konqueror.

• -ms-: para Internet Explorer.