GONZALEZ BERMUDEZ JUAN JESUS

ESTRATEGIAS Y MODELADO DE NEGOCIOS EN INTERNET

Manual explicativo
Modelo de caja
El modelo de cajas o "box model" es seguramente la caracterstica ms importante del lenguaje de
hojas de estilos CSS, ya que condiciona el diseo de todas las pginas web. El modelo de cajas es el
comportamiento de CSS que hace que todos los elementos de las pginas se representen mediante
cajas rectangulares.
Las cajas de las pginas no son visibles a simple vista porque inicialmente no muestran ningn color
de fondo ni ningn borde.
El modelo de caja describe las cajas que se generan a partir de los elementos HTML. El modelo de
caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes, bordes, relleno
(padding) y contenido de cada elemento. La siguiente imagen muestra cmo se construye el modelo
de caja:

Su tarea es simplificar el diseo de la pagina asi como sus elementos por cada caja para asegurar
una vista ordenada y fcil de entender al momento de programarla.

GONZALEZ BERMUDEZ JUAN JESUS

ESTRATEGIAS Y MODELADO DE NEGOCIOS EN INTERNET

CREAR UN DISEO
Ahora se utilizara el cdigo CSS para crear un diseo con cabecera, una columna lateral
izquierda, un espacio principal y un pie de pgina o footer.
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
width:75px; float:left; height:200px; }
/*Ancho total 410 px - 8px bordes - 21 px de margin - 28 de padding -75px contenido caja 2
obtenemos 278 px*/
#caja3{ margin:0 7px 7px 0px; border-color:green;
width:278px; float: left; height: 300px;}
#caja4{border-color:orange; clear:both; height:55px;}
Con esta solucin se creara el siguiente modelo:

GONZALEZ BERMUDEZ JUAN JESUS

ESTRATEGIAS Y MODELADO DE NEGOCIOS EN INTERNET

Ahora solo resta disear que objetos entraran dentro del modelo(botn de sesin, redes sociales,
contenido, logo ,etc).