CSS - MODELO DE CAJA

Ilustración del modelo de caja y sus componentes en CSS.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

¿Cómo se muestran los elementos? Atributo display:
inline (I)
block (B)
inline-block (IB)

Modelo de caja: rectángulo con
Alto (B, IB)
Ancho (B, IB)
Márgenes: Verticales (B, IB). Horizontales: (I, B, IB)
Relleno (I, B, IB)
Bordes

Cálculo del tamaño de caja (box-sizing):
content-box
padding-box
border-box
-- 13-css-modelo-caja.html
<!DOCTYPE html>
<html>
<head>
<title>Modelo de Caja en CSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="modelo-caja.css">
</head>
<body>
<h1>El modelo de Caja</h1>
<!-- El valor predeterminado de "display" para párrafos es "block",
aquí lo hacemos explícito para ilustrar las diferencias.
Utilizaremos las herramientas del navegador para mostrar cómo
afectan los distintos valores de "display" a los atributos
de caja -->
<p>Párrafo 1.</p>
<p style="display:block">Párrafo 2 (B).</p>
<p style="display:inline">Párrafo 3 (I).</p>
<p style="display:inline-block">Párrafo 4 (IB).</p>
<p style="display:inline-block">Párrafo 5 (IB).</p>
<p>Párrafo 6.</p>
<div class="caja" id="caja1">Caja 1</div>
<div class="caja" id="caja2">Caja 2</div>
<div class="caja" id="caja3">Caja 3</div>
<div class="caja" id="caja4">Caja 4</div>
<div class="caja" id="caja5">Caja 5</div>
<div class="caja" id="caja6">Caja 6</div>
<div class="caja" id="caja7">Caja 7</div>
</body>
</html>

-- modelo-caja.css
#caja1 {
/* Podemos utilizar un "atajo" para definir varios
atributos del borde de una vez */
border: 10px solid;
margin: 10px;
padding: 10px;
width: 500px;
height: 300px;
}
#caja2 {
/* Acá definimos atributos individuales de márgenes */
border-width: 20px; /* ancho para todos los márgenes */
border-top-style: solid; /* estilo del margen superior */
border-bottom-style: dotted; /* estilo del margen inferior */
border-left-style: double; /* estilo del margen izquierdo */
border-right-style: dashed; /* estilo del margen derecho */
/* También podemos definir individualmente márgenes y relleno,
si queremos. Acá hacemos márgenes individuales y relleno
global para el elemento */
margin-left: 10px;
margin-top: 50px;
/* Doblamos el relleno respecto de la primera caja para
ilustrar la diferencia */
padding: 20px;
/* Nótese que estamos definiendo las cajas 1 y 2 del mismo
ancho y alto, pero con el box-sizing predeterminado,
los anchos resultantes son distintos en la práctica */
width: 500px;
height: 300px;
}
/* Con las siguientes dos cajas, ilustraremos el uso de
box-sizing para garantizar las medidas de ancho y alto
totales según lo especificado */
#caja3 {
border: 10px solid;
margin: 10px;
padding: 10px;
width: 500px;
height: 300px;
background-color: lightgrey;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#caja4 {
border: 10px solid;
margin: 10px;
padding: 50px;
width: 500px;
height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Ilustrar radio de bordes */
#caja5 {
border: 10px solid black;
border-radius: 15px;
margin: 50px;
width: 300px;
height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#caja6 {
border: 10px solid black;
border-radius: 50%;
margin: 50px;
width: 300px;
height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#caja7 {
border: 10px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 50px;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 0px;
margin: 50px;
width: 300px;
height: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.caja {
background-color: lightgrey;
}

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.