Capitulo 4

El modelo de cajas o «box model» es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. Las cajas de una página se crean automáticamente. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la página web de http://www.alistapart.com/ después de forzar a que todas las cajas muestren su borde:

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre . Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página . Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
• Borde (border): línea que encierra completamente el contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

        4.1. Anchura y altura

4.1.1. Anchura.

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">
  ...
</div>

4.1.2. Altura.

La propiedad CSS que controla la altura de los elementos se denomina height.









Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura. El valor inherit indica que la altura del elemento se hereda de su elemento padre.


El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }

<div id="cabecera">
  ...
</div>


CSS define otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height, que se verán más adelante.

       4.2. Margen y relleno

CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.










Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:





Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).

El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
.destacado {
  margin-left: 2em;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>

<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>

<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>

A continuación se muestra el aspecto del ejemplo anterior en cualquier navegador:








Algunos diseñadores web utilizan la etiqueta <blockquote> para tabular los contenidos de los párrafos. Se trata de un error grave porque HTML no debe utilizarse para controlar el aspecto de los elementos. CSS es el único responsable de establecer el estilo de los elementos, por lo que en vez de utilizar la etiqueta <blockquote> de HTML, debería utilizarse la propiedad margin-left de CSS.

Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left y margin-right) se pueden aplicar a cualquier elemento, tal y como muestra la siguiente imagen:

La imagen anterior muestra el resultado de aplicar los mismos márgenes a varios enlaces y varios párrafos . Sin embargo, los márgenes laterales funcionan sobre cualquier tipo de elemento, por lo que los enlaces se muestran separados entre sí y los párrafos aumentan su separación con los bordes laterales de su elemento contenedor.
Estas propiedades especiales se denominan «propiedades shorthand» y CSS define varias propiedades de este tipo, como se verá más adelante.









4.2.2. Relleno

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.









Cada una de estas propiedades establece la separación entre el contenido y los bordes laterales de la caja del elemento:










La notación {1, 4} de la definición anterior significa que la propiedad padding admite entre uno y cuatro valores, con el mismo significado que el de la propiedad margin. Ejemplo:

body {padding: 2em}     /* Todos los rellenos valen 2em */
body {padding: 1em 2em} /* Superior e inferior = 1em, Izquierdo y derecho = 2em */
body {padding: 1em 2em 3em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em 4em} /* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */



       4.3. Bordes

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento. Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en total CSS define 20 propiedades relacionadas con los bordes.

4.3.1. Anchura


La anchura de los bordes se indica mediante una medida (en cualquier unidad de medida absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).

La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale cada palabra clave, por lo que pueden producirse diferencias visuales entre navegadores. Así por ejemplo, el grosor medium equivale a 4px en algunas versiones de Internet Explorer y a 3px en el resto de navegadores.
div {
  border-top-width: 10px;
  border-right-width: 1em;
  border-bottom-width: thick;
  border-left-width: thin;
}
p { border-width: thin }                   /* thin thin thin thin */
p { border-width: thin thick }             /* thin thick thin thick */
p { border-width: thin thick medium }      /* thin thick medium thick */
p { border-width: thin thick medium thin } /* thin thick medium thin */

Si se indica un solo valor, se aplica a los cuatro bordes. Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho.

Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al borde izquierdo y derecho y el tercer valor se aplica al borde inferior. Si se indican los cuatro valores, el orden de aplicación es superior, derecho, inferior e izquierdo.

4.3.2. Color

El color de los bordes se controla con las cuatro propiedades siguientes:










div {
  border-top-color: #CC0000;
  border-right-color: blue;
  border-bottom-color: #00FF00;
  border-left-color: #CCC;
}


CSS incluye una propiedad "shorthand" llamada border-color para establecer de forma simultánea el color de todos los bordes de una caja:









En este caso, al igual que sucede con la propiedad border-width, es posible indicar de uno a cuatro valores y las reglas de aplicación son idénticas a las de la propiedad border-width.

4.3.3. Estilo


Por último, CSS permite establecer el estilo de cada uno de los bordes mediante las siguientes propiedades:









El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas definidas por CSS. Como el valor por defecto de esta propiedad es none, los elementos no muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.





Las reglas CSS necesarias para mostrar los estilos anteriores son las siguientes:
div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Los bordes más utilizados son solid y dashed, seguidos de double y dotted.

4.3.4. Propiedades shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo «shorthand» que permiten establecer todos los atributos de los bordes de forma simultánea.

: una de las siguientes palabras clave: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Las propiedades «shorthand» permiten establecer alguno o todos los atributos de cada borde.

       4.4. Margen, relleno, bordes y modelos de caja.

Así, la anchura/altura establecida con CSS siempre hace referencia a la anchura/altura del contenido. La anchura/altura total del elemento debe tener en cuenta además los valores del resto de partes que componen la caja del box model. El modo quirks es equivalente a la forma en la que se visualizaban las páginas en los navegadores Internet Explorer 4 y Netscape Navigator 4. La diferencia más notable entre los dos modos es el tratamiento del «box model», lo que puede afectar gravemente al diseño de las páginas HTML.

Los navegadores seleccionan automáticamente el modo en el que muestran las páginas en función del DOCTYPE definido por el documento. DOCTYPE de HTML 4. En el caso concreto de Internet Explorer, también activan el modo quirks los modos XHTML 1.

4.4.1 Los modos de compatibilidad de Internet Explorer.

El navegador Internet Explorer 8 introduce el concepto de «compatibilidad de la página» para asegurar que todas las páginas HTML se vean correctamente en cualquier versión de ese navegador. Internet Explorer 8, a diferencia de sus versiones anteriores, soporta completamente el estándar CSS 2.1. Sin embargo, muchos sitios web se diseñaron para Internet Explorer 6 y 7, por lo que incluyen trucos, hacks y filtros que arreglan los errores y carencias de esas versiones del navegador. Para evitar que las páginas diseñadas para navegadores anteriores se vean mal en esta nueva versión, Internet Explorer 8 incluye la opción de «compatibilidad de la página», que permite indicar la versión de Internet Explorer para la que la página ha sido diseñada.

De esta forma, si la página no se visualiza correctamente en Internet Explorer 8, se puede indicar al navegador que la muestre como si fuera Internet Explorer 6 o 7. Si esa directiva es una de las que activan el modo estándar, la página se muestra en el modo estándar de Internet Explorer 7. En otro caso, se muestra en el modo quirks de Internet Explorer 5. Si esa directiva es una de las que activan el modo estándar, la página se muestra en el modo estándar de Internet Explorer 8.

Si las futuras versiones Internet Explorer 9 y 10 incluyeran mejor compatibilidad, las páginas se visualizarían en ese modo avanzado de compatibilidad.

El modo de compatibilidad de la página se indica mediante una nueva etiqueta con la propiedad X-UA-Compatible y cuyo valor es el que utiliza Internet Explorer 8 para determinar el modo que se utiliza

No obstante, esta opción de compatibilidad de la página debe entenderse como una solución temporal que evita que los sitios web se vean mal en Internet Explorer 8.

       4.5. Fondos.

El fondo puede ser un color simple o una imagen. Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento . Si se establece un fondo a la página, como el valor inicial del fondo de los elementos es transparente, todos los elementos de la página se visualizan con el mismo fondo a menos que algún elemento especifique su propio fondo. La propiedad background-color permite mostrar un color de fondo sólido en la caja de un elemento.



Por otra parte, suele ser habitual indicar un color de fondo siempre que se muestra una imagen de fondo. En caso de que la imagen no se pueda mostrar o contenga errores, el navegador mostrará el color indicado y la página no parecerá que contiene errores. Si la imagen que se quiere mostrar es demasiado grande para el fondo del elemento, solamente se muestra la parte de imagen comprendida en el tamaño del elemento. Si la imagen es más pequeña que el elemento, CSS la repite horizontal y verticalmente hasta llenar el fondo del elemento.

Valor inicial0% 0%DescripciónControla la posición en la que se muestra la imagen en el fondo del elemento

La propiedad background-position permite indicar la distancia que se desplaza la imagen de fondo respecto de su posición original situada en la esquina superior izquierda. Si solamente se indica un porcentaje o una medida, se considera que es el desplazamiento horizontal y al desplazamiento vertical se le asigna automáticamente el valor de 50%. Si el valor de la propiedad background-position se indica mediante dos porcentajes x% y%, el navegador coloca el punto de la imagen de fondo en el punto del elemento. Si se utilizan solamente palabras clave, el orden es indiferente y por tanto, es equivalente indicar top left y left top.

La propiedad que controla este comportamiento es background-attachment.

La propiedad se denomina background y es la que generalmente se utiliza para establecer las propiedades del fondo de los elementos.