1. Que es el Modelo de Caja CSS
En general podemos decir que todos los elementos HTML están contenidas en cajas rectangulares; es decir, para CSS cada elemento presente en una página HTML está dentro de una caja; de tal manera que elementos como títulos, párrafos, imágenes, listas, videos, iconos, etc. están dentro de una caja rectangular y el conjunto de ellas son elementos que forma una página web.
Diagrama del Modelo de Caja CSS
Cada caja tiene un área de contenido (ejemplo: texto,imagen,cajas descendiente u otros elemento de contenido) y sus áreas opcionales: relleno(padding) ,bordes(border) , y márgenes(margin); El tamaño de cada área se especifica mediante las propiedades correspondientes, y puede ser cero (o en el caso de márgenes, negativo). El siguiente diagrama muestra cómo se relacionan estas áreas y la terminología utilizada para referirse a las diversas partes de la caja:
2. Propiedades del Modelo de Caja CSS
Ancho y Alto
Para indicar el ancho de un elemento simplemente establecemos la propiedad width y para determinar la altura establecemos la propiedad height.
Ejemplo de las propiedades width y height
index.html
Lorem ipsum dolor, sit amet consectetur
Lorem ipsum dolor, sit amet consectetur
<!--definimos los elementos en HTML-->
<p class="caja1">Lorem ipsum dolor, sit amet consectetur</p>
<p class="caja2">Lorem ipsum dolor, sit amet consectetur</p> style.css
/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.caja1 {
background-color: #4299e1;
color: #fff;
width: 448px; /*ancho del elemento*/
}
.caja2 {
background-color: #ed8936;
color: #fff;
width: 448px; /*ancho del elemento*/
height: 64px; /*alto del elemento*/
}Padding ó relleno
La propiedad padding en CSS define la parte más interna del modelo de caja , creando espacio alrededor del contenido y el borde del elemento.
Técnica del Reloj para Padding
Ejemplo de las propiedades padding y el uso de padding top , right, bottom y left
index.html
Lorem ipsum dolor, sit amet consectetur
Lorem ipsum dolor, sit amet consectetur
Lorem ipsum dolor, sit amet consectetur
<!--definimos los elementos en HTML-->
<p class="caja1">Lorem ipsum dolor, sit amet consectetur</p>
<p class="caja2">Lorem ipsum dolor, sit amet consectetur</p>
<p class="caja3">Lorem ipsum dolor, sit amet consectetur</p>style.css
/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.caja1 {
background-color: #4299e1;
color: #fff;
width: 448px; /*ancho del elemento*/
padding: 12px; /*relleno interno general*/
}
.caja2 {
background-color: #ed8936;
color: #fff;
width: 448px; /*ancho del elemento*/
padding-top: 20px; /*relleno interno superior*/
padding-right: 12px; /*relleno interno derecho*/
padding-bottom: 20px; /*relleno interno inferior*/
padding-left: 12px; /*relleno interno izquierdo*/
}
.caja3 {
background-color: #48bb78;
color: #fff;
width: 448px; /*ancho del elemento*/
/*relleno interno: superior derecho inferior izquierdo*/
padding: 48px 12px 8px 12px;
}Border ó borde
La propiedad border es una sintaxis abreviada en CSS que acepta múltiples valores para dibujar una línea alrededor del elemento al que se aplica.
Ejemplo de las propiedad de border general y sus estilos
index.html
<!--Definimos los elementos en HTML con 5 clases -->
<a href="http://" class="caja enlace1">Inicio</a>
<a href="http://" class="caja enlace2">Nosotros</a>
<a href="http://" class="caja enlace3">Servicios</a>
<a href="http://" class="caja enlace4">Productos</a>style.css
/*se aplican 5 selectores de clase .caja y .enlace1 .enlace2 .enlace3 .enlace4 */
.caja{
background-color: #e2e8f0;
color: #4a5568;
padding: 8px; /*relleno interno general*/
}
.enlace1 {
border: 5px solid #ed8936; /*borde solido con color*/
}
.enlace2 {
border: 5px dashed #ed8936; /*borde con guiones con color*/
}
.enlace3 {
border: 5px dotted #ed8936; /*borde con puntos con color*/
}
.enlace4 {
border: 5px solid #ed8936; /*borde solido con color */
border-radius: 5px; /*proporciona esquinas redondas al border */
}Técnica del Reloj para Border
Ejemplo de las propiedades border-top , border-right, border-bottom y border-left
index.html
<!--Definimos los elementos en HTML con 5 clases -->
<a href="http://" class="caja enlace1">Inicio</a>
<a href="http://" class="caja enlace2">Nosotros</a>
<a href="http://" class="caja enlace3">Servicios</a>
<a href="http://" class="caja enlace4">Productos</a>style.css
/*se aplican 5 selectores de clase .caja y .enlace1 .enlace2 .enlace3 .enlace4 */
.caja{
background-color: #e2e8f0;
color: #4a5568;
padding: 8px; /*relleno interno general*/
}
.enlace1 {
border-top: 5px solid #ed8936; /*borde superior solido con color*/
}
.enlace2 {
border-right: 5px dashed #ed8936; /*borde derecho con guiones con color*/
}
.enlace3 {
border-bottom: 5px dotted #ed8936; /*borde inferior con puntos con color*/
}
.enlace4 {
border-left: 5px solid #ed8936; /*borde izquierdo solido con color */
}Margin ó margen
La propiedad margin define la porción más externa del modelo de caja, creando espacio alrededor de un elemento, fuera de cualquier borde definido.
Técnica del Reloj para Padding
Ejemplo de las propiedades margin y el uso de margin top , right, bottom y left
index.html
<!--definimos los elementos en HTML-->
<div class="box1">Caja 1</div>
<div class="box2">Caja 2</div>
<div class="box3">Caja 3</div>style.css
/*Se aplica ancho al parrafo 1 y ancho y alto parrafo 2*/
.box1 {
background-color: #4299e1;
color: #fff;
width: 96px; /*ancho del elemento*/
height: 96px; /*alto del elemento*/
padding: 12px; /*relleno interno general*/
border-radius: 6px;/*esquinas redondas*/
margin: 16px; /*margen externo general*/
}
.box2 {
background-color: #ed8936;
color: #fff;
width: 96px; /*ancho del elemento*/
height: 96px; /*alto del elemento*/
padding: 12px; /*relleno interno general*/
border-radius: 6px; /*esquinas redondas*/
margin-top: 0px; /*margen externo superior*/
margin-right: 0px; /*margen externo derecho*/
margin-bottom: 16px; /*margen externo inferior*/
margin-left: 96px; /*margen externo izquierdo*/
}
.box3 {
background-color: #48bb78;
color: #fff;
width: 96px; /*ancho del elemento*/
height: 96px; /*alto del elemento*/
padding: 12px; /*relleno interno general*/
border-radius: 6px; /*esquinas redondas*/
/*margen externo: superior derecho inferior izquierdo*/
padding: 0px 0px 16px 192px;
}3. Calcular en Ancho y Alto Total de la Caja CSS
Observe que en los diagramas del modelo de caja el margen está en blanco. El margen es el único que no afecta el tamaño del cuadro en sí mismo, ya que es externo y no se tendrá en cuenta en las fórmulas para calcular ancho y alto total visible.
El tamaño de la caja en sí se calcula así:
Ejemplo Practico: Modelo de Caja con Escaleras y Cuadros
Utilizaremos un primer ejercicio para crean una página web con las siguientes Características:
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelo de Caja CSS</title>
<!--Enlace para llamar al archivos css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="caja1">caja1</div>
<div class="caja2">caja2</div>
<div class="caja3">caja3</div>
<div class="margen"></div>
<div class="box1">caja1</div>
<div class="box2">caja2</div>
<div class="box3">caja3</div>
<div class="margen"></div>
<div class="contenedor1">
<div class="contenedor2">
<div class="contenedor3">
</div>
</div>
</div>
</body>
</html>style.css
/*Importación del tipo de letra Roboto de Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
/*todos los elementos dentro del body heredan el tipo y tamaño de letra*/
body{
font-family: 'Roboto', sans-serif; /*Tipo del letra Roboto*/
font-size: 14px;
}
.margen{
margin: 48px; /*margen para generar un espacios*/
}
.caja1{
width: 48px; /*ancho*/
height: 32px; /*alto*/
background-color: #ebf8ff; /*color de fondo*/
padding: 8px; /*relleno interno general*/
margin-bottom: 8px; /*margen externo inferior */
}
.caja2{
width: 64px;
height: 32px;
background-color: #bee3f8;
padding: 8px;
margin-bottom: 8px;
}
.caja3{
width: 80px;
height: 32px;
background-color: #90cdf4;
padding: 8px;
margin-bottom: 8px;
}
.box1{
width: 80px;
height: 32px;
background-color: #fff5f7;
padding: 8px;
border-radius: 6px; /*esquinas redondas*/
margin-bottom: 8px;
margin-left: 8px; /*margen exterior izquierdo*/
}
.box2{
width: 80px;
height: 32px;
background-color: #fed7e2;
padding: 8px;
border-radius: 6px;
margin-bottom: 8px;
margin-left: 16px;
}
.box3{
width: 80px;
height: 32px;
background-color: #fbb6ce;
padding: 8px;
border-radius: 6px;
margin-bottom: 8px;
margin-left: 24px;
}
.contenedor1{
width: 96px;
height: 96px;
background-color: #4299e1;
padding: 12px;
border-radius: 6px;
/*centra el elemento vertical y horizontalmente*/
display: flex;
align-items: center;
justify-content: center;
}
.contenedor2{
width: 80px;
height: 80px;
background-color: #63b3ed;
padding: 12px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.contenedor3{
width: 64px;
height: 64px;
background-color: #90cdf4;
padding: 12px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
Actividad #4. CSS3: Modelo de Caja CSS
Ahora que ya sabes el uso de CSS en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.
Te ha resultado util esta guia de aprendizaje ?
Que tal el contenido?