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

2.4 Modelo de caja tradicional

Оглавление

En un comienzo el diseño web se hacía a partir de tablas: elementos que casi sin querer se convirtieron en herramientas que permitían organizar cajas de contenido en pantalla. Esto puede considerarse el primer modelo de caja de la Web y entonces las cajas eran creadas expandiendo celdas y combinando filas, columnas y tablas enteras, una al lado de la otra o incluso anidándolas. Cuando los sitios web se hicieron más grandes y complejos, esta práctica reveló graves problemas debido al tamaño de los archivos y al mantenimiento de código que exigían.

Importante

El Modelo de caja tradicional presentado a continuación no es una incorporación de HTML5. Este modelo está disponible desde la primera versión de CSS y es probable que ya sepa cómo utilizarlo. Si este es el caso, no dude pasar a la siguiente sección de este capítulo.

Estos problemas iniciales abrieron camino a lo que ahora parece natural: la división entre estructura y presentación. El uso de etiquetas <div> y de estilos CSS hizo que fuera posible sustituir la función de las tablas y separar la estructura HTML de la presentación. Efectivamente, con elementos <div> y CSS podemos crear cajas en la pantalla, colocarlas en un lado u otro y darles un tamaño específico, borde, color, etc. CSS proporciona propiedades específicas que permiten organizar las cajas de acuerdo a las necesidades y estas propiedades han sido lo suficientemente poderosas como para crear un modelo de cajas que se ha desarrollado hasta dar lugar a lo que hoy se conoce como el Modelo de caja tradicional.

Debido a algunas deficiencias de este modelo, las tablas se siguieron usando por un tiempo pero, bajo la influencia del éxito de Ajax y una gran cantidad de nuevas aplicaciones interactivas, los elementos <div> y los estilos CSS se convirtieron poco a poco en el nuevo estándar. Finalmente, el modelo de caja tradicional fue adoptado a gran escala.

El gran libro de HTML5, CSS3 y Javascript

Подняться наверх