En el desarrollo web , el modelo de caja CSS se refiere a cómo se modelan los elementos HTML en los motores de los navegadores y cómo las dimensiones de esos elementos HTML se derivan de las propiedades CSS . Es un concepto fundamental para la composición de páginas web HTML . [3] Las pautas del modelo de caja están descritas por los estándares web del Consorcio World Wide Web (W3C), específicamente el Grupo de Trabajo CSS. Durante gran parte de finales de la década de 1990 y principios de la de 2000, hubo implementaciones no compatibles con los estándares del modelo de caja en los navegadores principales. Con la llegada de CSS2 en 1998, que introdujo la box-sizingpropiedad, el problema se había resuelto en gran medida.
La especificación de hojas de estilo en cascada (CSS) describe cómo se muestran los elementos de las páginas web en los navegadores gráficos. La sección 4 de la especificación CSS1 define un "modelo de formato" que otorga a los elementos a nivel de bloque (como py blockquote) un ancho y una altura, y tres niveles de cuadros que los rodean: relleno, bordes y márgenes. [4] Si bien la especificación nunca utiliza el término "modelo de cuadro" de manera explícita, el término se ha vuelto ampliamente utilizado por los desarrolladores web y los proveedores de navegadores web.
Todos los elementos HTML pueden considerarse "cajas", esto incluye divetiqueta, prótulo o aetiqueta. Cada una de esas cajas tiene cinco dimensiones modificables:
heighty describe las widthdimensiones del contenido real de la caja (texto, imágenes, ...)paddingel espacio entre este contenido y el borde del cuadrobordercualquier tipo de línea (continua, punteada, discontinua...) que rodea el cuadro, si está presentemargines el espacio alrededor del bordeSegún la especificación CSS1, publicada por W3C en 1996 y revisada en 1999, cuando se especifica explícitamente un ancho o alto para cualquier elemento a nivel de bloque, debe determinar solo el ancho o alto del elemento visible, con el relleno, los bordes y los márgenes aplicados después. [4] [5] Antes de CSS3, este modelo de caja se conocía como modelo de caja W3C , en CSS3, se conoce como content-box.
Por lo tanto, el ancho total de una caja es left-margin+ left-border+ left-padding+ width+ right-padding+ right-border+ right-margin. De manera similar, la altura total de una caja es top-margin+ top-border+ top-padding+ height+ bottom-padding+ bottom-border+ bottom-margin.
Por ejemplo, el siguiente código CSS
. myClass { ancho : 200 px ; alto : 100 px ; relleno : 10 px ; borde : sólido 10 px negro ; margen : 10 px ; } especificaría las dimensiones de la caja de cada bloque perteneciente a 'myClass'. Además, cada una de esas cajas tendrá una altura total de 160 px y un ancho de 260 px.
CSS3 introdujo el modelo de caja de Internet Explorer al estándar, conocido como border-box. [6]
Antes de HTML 4 y CSS, muy pocos elementos HTML admitían tanto bordes como relleno, por lo que la definición del ancho y la altura de un elemento no era muy controvertida. Sin embargo, variaba según el elemento. El atributo HTML width de una tabla definía el ancho de la tabla, incluido su borde. [7] Por otro lado, el atributo HTML width de una imagen definía el ancho de la propia imagen (dentro de cualquier borde). [8] El único elemento que admitía relleno en aquellos primeros días era la celda de la tabla. El ancho de la celda se definía como "el ancho sugerido para el contenido de una celda en píxeles, excluyendo el relleno de la celda". [9]
En 1996, CSS [10] introdujo márgenes, bordes y relleno para muchos más elementos. Adoptó un ancho de definición en relación con el contenido, el borde, el margen y el relleno similar al de una celda de tabla. [11] Desde entonces, esto se conoce como el modelo de caja del W3C .
En aquel momento, muy pocos proveedores de navegadores implementaron el modelo de caja del W3C al pie de la letra. Los dos principales navegadores de la época, Netscape 4.0 e Internet Explorer 4.0, definían el ancho y la altura como la distancia de borde a borde. [12] Esto se ha denominado el modelo de caja tradicional [13] o de Internet Explorer . [14]
Internet Explorer en " modo peculiaridades " incluye el contenido, el relleno y los bordes dentro de un ancho o alto especificado; esto da como resultado una representación más angosta o más corta de un cuadro de lo que resultaría siguiendo el comportamiento estándar. [15]
El comportamiento del modelo de caja de Internet Explorer se consideró a menudo un error, debido a la forma en que las versiones anteriores de Internet Explorer manejan el modelo de caja o el tamaño de los elementos en una página web, que difiere de la forma estándar recomendada por el W3C para el lenguaje de hojas de estilo en cascada . [16] [17] A partir de Internet Explorer 6 , el navegador admite un modo de representación alternativo (llamado "modo compatible con estándares") que resuelve esta discrepancia. Sin embargo, por razones de compatibilidad con versiones anteriores, todas las versiones aún se comportan de la forma habitual, no estándar, de forma predeterminada (consulte el modo peculiar ). Internet Explorer para Mac no se ve afectado por este comportamiento no estándar.
Las versiones 6 y posteriores de Internet Explorer no se ven afectadas por el error si la página contiene determinadas declaraciones de tipo de documento HTML . Estas versiones mantienen el comportamiento con errores cuando están en modo peculiar por razones de compatibilidad con versiones anteriores. [18] Por ejemplo, el modo peculiar se activa:
Se han ideado varias soluciones alternativas para obligar a las versiones 5 y anteriores de Internet Explorer a mostrar páginas web utilizando el modelo de caja del W3C. Estas soluciones alternativas generalmente explotan errores no relacionados en el procesamiento del selector CSS de Internet Explorer para ocultar ciertas reglas del navegador. La más conocida de estas soluciones alternativas es el "truco del modelo de caja" desarrollado por Tantek Çelik , un ex empleado de Microsoft que desarrolló esta idea mientras trabajaba en Internet Explorer para Macintosh. Implica especificar una declaración de ancho para Internet Explorer para Windows y luego anularla con otra declaración de ancho para navegadores compatibles con CSS. Esta segunda declaración se oculta de Internet Explorer para Windows explotando otros errores en la forma en que analiza las reglas CSS. La implementación de estos "trucos" CSS se ha complicado aún más con el lanzamiento público de Internet Explorer 7, que ha tenido algunos problemas solucionados, pero no otros, lo que provoca resultados no deseados en las páginas que utilizan estos trucos. [18]
Los hacks del modelo de caja han demostrado ser poco fiables porque dependen de errores en la compatibilidad de CSS de los navegadores que pueden solucionarse en versiones posteriores. Por este motivo, algunos desarrolladores web han recomendado evitar especificar tanto el ancho como el relleno para el mismo elemento o utilizar comentarios condicionales o filtros CSS para solucionar el error del modelo de caja en versiones anteriores de Internet Explorer. [14] [20]
El diseñador web Doug Bowman ha dicho que el modelo de caja original de Internet Explorer representa un enfoque mejor y más lógico. [21] Peter-Paul Koch da el ejemplo de una caja física, cuyas dimensiones siempre se refieren a la caja misma, incluido el relleno potencial, pero nunca a su contenido. [13] Dice que este modelo de caja es más útil para los diseñadores gráficos, que crean diseños basados en el ancho visible de las cajas en lugar del ancho de su contenido. [22] Bernie Zimmermann dice que el modelo de caja de Internet Explorer se acerca más a la definición de dimensiones de celda y relleno utilizado en el modelo de tabla HTML. [23]
El W3C ha incluido una propiedad "box-sizing" en CSS3. Cuando box-sizing: border-box;se especifica para un elemento, cualquier relleno o borde del elemento se dibuja dentro del ancho y alto especificados, "como lo implementan comúnmente los agentes de usuario HTML heredados". [24] Internet Explorer 8 , navegadores WebKit como Apple Safari 5.1+ y Google Chrome , navegadores basados en Gecko como Mozilla Firefox 29.0 y posteriores, Opera 7.0 y posteriores, y Konqueror 3.3.2 y posteriores admiten la propiedad box-sizing de CSS3. Los navegadores Gecko anteriores a 29.0 admiten la misma funcionalidad utilizando la -moz-box-sizingpropiedad específica del navegador. [25] border-box es el modelo de caja predeterminado utilizado en el marco Bootstrap .
El ancho de tabla predeterminado es el espacio entre los márgenes izquierdo y derecho actuales.
Es posible utilizar esta propiedad para emular el comportamiento de los navegadores que no admiten correctamente la especificación del modelo de caja CSS.