LM | DÍA 13: MODELO DE CAJAS

Día 13. En el día de hoy, hemos comenzado a trabajar en el modelo de cajas. Este tema será vital y muy importante durante el desarrollo web que llevemos a cabo durante el curso y, en el futuro. A continuación, un resumen de lo impartido en clase.  

Derechos de autor aquí

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

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.

Imagen sacada de los apuntes de nuestro profesor 

Las pares que componen el modelo de cajas es: 

• Contenido: (content) se trata del contenido HTML del elemento. 
• Relleno : (padding) espacio liobre 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.

De manera automática, todos los elementos salvo el head, se representan mediante cajas. 

Margen, relleno y bordes: 

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y  height. El margen, relleno y bordes establecen la anchura final de el elemento en cuestión. 

Etiqueta <div>:

Empleando esta etiqueta, definiremos el estilo globalmente para el contenido que se encuentre dentro de esta etiqueta. Al usarlo, se añade un salto de línea automático. 

Etiqueta <span>: 

Tiene una misión parecida a <div>, pero que se usa para cambiar elementos más pequeños en lugar de bloques enteros.

Dato: los elementos <div> y <span> por sí solos no dotan al contenido de ninguna característica especial, pero junto con las definiciones de estilo, permiten crear bloques o elementos personalizados. 

Algunos atributos para aplicar estilos a cajas:

• margin: Determina los cuatro márgenes de la caja. 
• padding: Determina el espacio entre el borde y el contenido de un elemento. Puede medirse e longitud o porcentaje. Se pueden especificar entre uno y cuatro valores. 
• border-color: Color del borde
• border-style: Estilo del borde
• float: Para alinear un elemento a la iz o der haciendo que flote sobre un determinado texto. 
• clear: Determina los lados en los que no se podrán situar elementos flotantes
• display: Gestiona cajas y bloques
• position: Determina el tipo de posicionamiento de la caja