En este nuevo capítulo vamos a estudiar el modelo de cajas de la especificación 2.1 de CSS, concepto primordial para comprender con gran detalle determinadas de las propiedades que veremos más adelante. Todos os navegadores modernos implementan bien el modelo de cajas del W3C a excepción de la versión 6 de Internet Explorer, el infierno de os desarrolladores. Modelo de cajas del W3C Cuando un navegador solicita una página web y la presenta en la pantalla del usuario, crea una caja rectangular donde encierra el contenido de cada elemento. Inicialmente las cajas no son visibles porque no presentan ningún estilo pero están ahí y nosotros podemos adaptar el comportamiento de la caja de cada elemento, añadiendo bordes, rellenos, colores de fondo, imágenes de fondo, etc. A continuación podemos ver un gráfico extraído de la especificación oficial que representa una caja cualquiera de un elemento: Las fracciónes que componen esta caja son: Contenido (content), es decir, el contenido del fundamento HTML, ya sea el texto de un párrafo o una imagen. Relleno (padding), es un lugar abierta entre el contenido y el borde. Borde (border), es una línea que encierra el contenido y su relleno. Borde (margin), es un lugar abierta entre la caja y el resto de cajas adyacentes. A través de ciertas propiedades CSS podemos adaptar os estios de todas estas fracciónes de la caja de cada elemento. Las cajas se comportan de forma diferente dependiendo del tipo de fundamento que encierre en su interior. Podemos diferenciar dos tipos de fundamentos, fundamentos en línea y fundamentos en bloque. Os fundamentos de bloque siempre empiezan en una nueva línea y ocupan todo el lugar disponible hasta el final de línea. Os fundamentos de bloque definidos por HTML son: address, , center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr. Os fundamentos en línea no empiezan siempre en nueva línea ya que solo ocupan el lugar indispensable para presentar su contenido. Os fundamentos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, , input, kbd, label, q, s, samp, select, small, span, strike, , sub, sup, textarea, tt, u, var El modelo de cajas del W3C se comporta de la próximo manera. Se calcula el lugar que va a ocupar el contenido. Se suma el lugar que se le asigne al relleno, se suma el lugar que ocupa el margen y por último se suma el lugar que ocupa el margen. El fruto final es el dimensión de la caja que crea el navegador para el elemento. Por lo que podemos afirmar que el modelo de cajas del W3C es aditivo, es decir suma todos os lugars para calcular el dimensión final. El modelo de cajas de Internet Explorer 6 Internet Explorer 6 tiene dos modos de funcionamiento, el modo estándar que más o menos cumple con os estándares del W3C y por lo tanto el modelo de cajas funciona practicamente idéntico que en el resto de navegadores, y el modo quirks, que es un modo que mantiene la compatibilidad hacia atrás pero que cuenta con su propio modelo de cajas. Como consejo, no diseñeis jamás para este navegador, jamás, jamás, jamás. Es más este navegador ya debería estar obsoleto pero aún siguen utilizándolo muchas personas y por lo tanto hay veces que nos veremos obligados a diseñar también para este navegador. El modelo de cajas de IE6 en el modo quircks funciona de la próximo forma. Se calcula el lugar que va a ocupar el contenido y se le suma el lugar que va a ocupar el margen. Punto final. Por lo tanto en el lugar del contenido está incluido el lugar que ocupa el relleno y el lugar que ocupa el borde. Por lo que una misma caja en IE6 modo quircks se presenta con memos anchura y más altura.