CSS
Tutorial CSS: Modelo de caja
CSS modelo caja: definición y ejemplos. Domina el concepto de modelo de caja en CSS con ejemplos prácticos y detallados.
Aprende CSS GRATIS y certifícateComponentes del modelo de caja
En CSS, el modelo de caja es fundamental para comprender cómo se renderizan los elementos en una página web. Cada elemento en un documento HTML genera una "caja" que consiste en varios componentes clave:
Contenido (content): Esta es la parte más interna de la caja y contiene el contenido real, como texto o imágenes. El tamaño de esta área puede ser definido mediante las propiedades width
y height
.
Relleno (padding): El área entre el contenido y el borde (border) de la caja. El relleno se añade al tamaño del contenido y puede ser definido individualmente para cada lado de la caja (top, right, bottom, left) mediante las propiedades padding-top
, padding-right
, padding-bottom
y padding-left
, o de manera unificada con la propiedad padding
.
Borde (border): La línea que rodea el relleno. El borde tiene múltiples propiedades que configuran su ancho (border-width
), su estilo (border-style
) y su color (border-color
). Como en el caso del relleno, estas propiedades pueden ser especificadas individualmente o unificadamente mediante la propiedad border
.
Margen (margin): El espacio exterior que separa la caja de otros elementos en la página. El margen también puede ser configurado individualmente por cada lado de la caja (margin-top
, margin-right
, margin-bottom
, margin-left
) o de manera unificada con la propiedad margin
.
Ejemplo de declaración
.elemento {
width: 200px; /* Ancho del contenido */
height: 100px; /* Alto del contenido */
padding: 10px; /* Relleno de 10px en todos los lados */
border: 2px solid #000; /* Borde de 2px de ancho, estilo sólido, color negro */
margin: 20px; /* Margen de 20px en todos los lados */
}
En este ejemplo:
- El
width
yheight
definen el tamaño del contenido. - El
padding
añade 10px alrededor del contenido en todos los lados. - El
border
especifica un borde de 2px que es sólido y negro. - El
margin
añade 20px de espacio libre fuera del borde.
Tamaño total de la caja
Cuando el navegador renderiza este elemento, el tamaño total de la caja representada es igual al tamaño del contenido. En este caso particular:
Ancho total: content width
200px
Alto total: content height
100px
Box-sizing y el modelo de caja
El valor por defecto de box-sizing
es content-box
, lo que significa que width
y height
excluyen padding
y border
. Sin embargo, si se establece box-sizing: border-box;
, entonces width
y height
incluirán padding
y border
dentro del tamaño total del elemento, lo que puede simplificar el control del layout y el ajuste del diseño.
.elemento {
box-sizing: border-box;
}
Con box-sizing: border-box;
, las propiedades width
y height
representarán el tamaño total de la caja, incluidos padding
y border
, lo que en este caso significa que el contenido será menos ancho y alto para encajar dentro del tamaño total definido.
Visualización gráfica
+-----------------------------+
| margin |
| +-----------------------+ |
| | border | |
| | +---------------+ | |
| | | padding | | |
| | | +---------+ | | |
| | | | content | | | |
| | | +---------+ | | |
| | +---------------+ | |
| +-----------------------+ |
+-----------------------------+
En el contexto del modelo de caja en CSS, entender la visualización gráfica de cómo se representan los diferentes componentes de una caja es esencial. Cada caja se compone de contenido, relleno, borde y margen, cada uno de los cuales puede variar en tamaño y estilos.
Visualización básica del modelo de caja
Considéralo como una serie de capas que se apilan desde el interior hacia el exterior:
- Contenido (content): Esta es la parte más interna, donde se encuentra el texto o las imágenes.
- Relleno (padding): Rodea el contenido y proporciona espacio entre el contenido y el borde.
- Borde (border): Rodea el relleno y encierra la caja.
- Margen (margin): Rodea el borde y proporciona espacio entre la caja y otras cajas.
Cada uno de estos componentes puede ser visualizado y modificado utilizando diferentes propiedades CSS. A continuación, se presenta un ejemplo práctico de cómo se muestra y ajusta la representación gráfica de estos componentes en un elemento HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualización del Modelo de Caja</title>
<style>
.caja {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #3498db;
margin: 15px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="caja">Contenido de la caja</div>
</body>
</html>
En este ejemplo:
- Ancho del contenido: Es de
200px
y su alto de100px
. - Relleno:
20px
en todos los lados, lo que da un espacio adicional alrededor del contenido. - Borde:
5px
de ancho, sólido y de color azul (#3498db
). - Margen:
15px
alrededor del borde, separando la caja de otros elementos circundantes.
Cuando se renderice en un navegador, el contenido será visible como la parte más interna, rodeado por el relleno, el borde y finalmente el margen, creando una estructura bien definida. Esto permite un mejor control del espacio y la alineación de los elementos en el diseño de la web.
Diagramas para aclaración
Para una mejor visualización, es posible usar diagramas que ilustran cómo estos distintos componentes se apilan uno sobre otro. Por ejemplo, aplicaciones como las herramientas de desarrollo de Google Chrome permiten inspeccionar y visualizar gráficamente el modelo de caja de cualquier elemento en una página web, mostrando claramente cada nivel: contenido, relleno, borde y margen.
El conocimiento visual de estos componentes es crucial para el ajuste fino del layout y el diseño de una página web, ya que permite ver de manera intuitiva cómo interactúan entre sí los diferentes elementos CSS. Esta visualización gráfica ayuda enormemente a identificar problemas de diseño, alinear elementos adecuadamente y optimizar el espacio en las interfaces web.
Ejemplo de código HTML y CSS
En esta sección, se ilustrará cómo aplicar el modelo de caja en un ejemplo práctico utilizando HTML y CSS. Crearemos una caja con contenido, relleno, borde y márgenes definidos, y veremos cómo se representa visualmente en una página web.
HTML
Primero, definamos la estructura HTML básica con un div
que representará nuestra caja. En este caso, utilizaremos una clase llamada box
.
<!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 en CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">Contenido de la caja</div>
</body>
</html>
CSS
Ahora, definamos el CSS en un archivo separado (styles.css
). Aplicaremos varias propiedades CSS para mostrar cómo el contenido (content), relleno (padding), borde (border) y margen (margin) afectan a nuestra caja.
.box {
width: 300px; /* Ancho del contenido */
height: 150px; /* Alto del contenido */
padding: 20px; /* Relleno de 20px en todos los lados */
border: 10px solid #3498db; /* Borde de 10px de ancho, estilo sólido, color azul */
margin: 30px; /* Margen de 30px en todos los lados */
background-color: #f8f9fa; /* Color de fondo */
box-sizing: border-box; /* Incluye relleno y borde en el ancho y alto totales */
}
Explicación
- Ancho y alto del contenido: La caja tiene un ancho de
300px
y un alto de150px
. - Relleno (padding): Se añade
20px
de espacio alrededor del contenido en todos los lados. - Borde (border): Aplicamos un borde de
10px
de ancho, sólido y de color azul (#3498db
). - Margen (margin): Añadimos
30px
de margen alrededor de la caja, separándola de otros elementos adyacentes. - Color de fondo (background-color): Establecemos un color de fondo claro (
#f8f9fa
) para distinguir la caja. - Box-sizing: border-box: Utilizamos
border-box
para incluir el relleno y borde en el ancho y alto totales.
Resultado
Cuando este código es renderizado en un navegador, la caja se mostrará con las dimensiones y estilos especificados. box-sizing: border-box
asegura que las dimensiones totales de la caja incluyan el relleno y el borde, haciendo que el control de layout sea más sencillo y predecible. Esto es útil para evitar cálculos manuales y garantizar que los elementos se ajusten adecuadamente dentro de un diseño más complejo.
Cálculo del tamaño total
Para calcular el tamaño total de una caja en CSS, podemos desglosar los componentes individuales que lo componen: contenido, relleno, borde y margen. El tamaño total de la caja se calcula sumando estos componentes tanto en el eje horizontal (ancho) como en el eje vertical (alto).
Fórmulas básicas
Para el cálculo sin box-sizing: border-box
, las fórmulas son las siguientes:
- Ancho total:
content width + padding-left + padding-right + border-left + border-right
- Alto total:
content height + padding-top + padding-bottom + border-top + border-bottom
Ejemplo práctico
Tomemos un ejemplo CSS:
.elemento {
width: 200px; /* Ancho del contenido */
height: 100px; /* Alto del contenido */
padding: 10px; /* Relleno de 10px en todos los lados */
border: 3px solid #000; /* Borde de 3px de ancho, estilo sólido, color negro */
margin: 15px; /* Margen de 15px en todos los lados */
}
Cálculo del ancho total
content width
: 200pxpadding-left + padding-right
: 10px + 10px = 20pxborder-left + border-right
: 3px + 3px = 6pxmargin-left + margin-right
: 15px + 15px = 30px
Ancho total:
200px + 20px + 6px + 30px = 256px
Cálculo del alto total
content height
: 100pxpadding-top + padding-bottom
: 10px + 10px = 20pxborder-top + border-bottom
: 3px + 3px = 6pxmargin-top + margin-bottom
: 15px + 15px = 30px
Alto total:
100px + 20px + 6px + 30px = 156px
Por tanto, el tamaño total de esta caja es de 256px
de ancho y 156px
de alto.
Con box-sizing: border-box
Cuando se utiliza box-sizing: border-box
, el borde y el relleno se incluyen dentro del ancho y alto especificados. Esto simplifica el cálculo del tamaño total ya que width
y height
representan el tamaño total de la caja, y solo los márgenes necesitan sumarse.
Modificamos el ejemplo anterior con box-sizing: border-box
:
.elemento {
box-sizing: border-box;
width: 200px; /* Ancho total, incluido borde y relleno */
height: 100px; /* Alto total, incluido borde y relleno */
padding: 10px; /* Relleno de 10px en todos los lados */
border: 3px solid #000; /* Borde de 3px de ancho, estilo sólido, color negro */
margin: 15px; /* Margen de 15px en todos los lados */
}
Cálculo del ancho total
content width + padding-left + padding-right + border-left + border-right
: incluido enwidth
width
: 200pxmargin-left + margin-right
: 15px + 15px = 30px
Ancho total:
200px + 30px = 230px
Cálculo del alto total
content height + padding-top + padding-bottom + border-top + border-bottom
: incluido enheight
height
: 100pxmargin-top + margin-bottom
: 15px + 15px = 30px
Alto total:
100px + 30px = 130px
Con box-sizing: border-box
, la escritura de CSS y el cálculo del tamaño total de la caja son más predecibles y manejables, especialmente en diseños complejos.
Colapso de márgenes
El colapso de márgenes en CSS es un fenómeno que ocurre cuando los márgenes verticales de los elementos adyacentes se "colapsan" en lugar de sumarse. Este comportamiento puede resultar confuso, pero es esencial comprenderlo para diseñar layouts correctamente y evitar problemas de espaciado inesperado.
Condiciones para el colapso de márgenes
Márgenes adyacentes de elementos hermanados: Cuando dos elementos bloque están uno encima del otro en el flujo normal del documento, el margen inferior del primer elemento y el margen superior del segundo elemento se colapsan. El margen resultante será el del mayor de los dos.
<div class="elemento1"></div>
<div class="elemento2"></div>
.elemento1 {
margin-bottom: 20px;
height: 50px;
background-color: lightblue;
}
.elemento2 {
margin-top: 30px;
height: 50px;
background-color: lightgreen;
}
Resulta en un margen entre los dos elementos de 30px
(el mayor de los dos).
Márgenes de elementos anidados sin bordes, rellenos ni contenido: Si tienes elementos anidados y el elemento padre no contiene ningún borde, relleno ni contenido, los márgenes exteriores de los elementos hijos se colapsan con los márgenes del padre.
<div class="padre">
<div class="hijo"></div>
</div>
.padre {
margin-top: 30px;
margin-bottom: 30px;
background-color: lightcoral;
}
.hijo {
margin-top: 20px;
margin-bottom: 20px;
height: 50px;
background-color: lightyellow;
}
Aquí, los márgenes margin-top
y margin-bottom
de .hijo
colapsan con los márgenes de .padre
, resultando en un margen total de 30px
en lugar de 50px
.
Elementos vacíos: Si un elemento no tiene contenido, relleno, borde ni altura (solamente márgenes), sus márgenes se colapsarán con los márgenes de los elementos adyacentes.
<div class="elemento3"></div>
<div class="elemento4"></div>
.elemento3 {
margin-bottom: 40px;
background-color: lightpink;
}
.elemento4 {
margin-top: 0px; /* Esto se añadirá solo si existe algún contenido */
background-color: lightgray;
}
Si .elemento4
no tiene contenido y solo define márgenes sin ninguna otra propiedad que evite el colapso, resultará en un margen de 40px
en lugar de sumarse.
Previniendo el colapso de márgenes
Usando bordes o relleno: Añade un borde o relleno al elemento contenedor para evitar que los márgenes colapsen.
.padre {
padding-top: 1px; /* Añadir relleno */
}
.padre {
border-top: 1px solid transparent; /* Añadir un borde */
}
Utilizando display con inline-block o flex: Elementos con display: inline-block
, flex
, grid
no colapsan márgenes de la misma manera.
.elemento1 {
display: inline-block;
}
Utilizando flotantes o posicionamiento absoluto: Elementos posicionados absolutamene (position: absolute
) o flotantes (float: left/right/none
) no participan en el colapso de márgenes.
.elemento {
position: absolute;
}
Consideraciones adicionales
El colapso de márgenes solo ocurre en la dirección vertical (márgenes superior e inferior). Los márgenes horizontales (izquierda y derecha) no colapsan en el flujo normal del documento.
El colapso de márgenes puede afectar considerablemente el diseño de una página web, especialmente en layouts más complejos con múltiples elementos anidados y espaciados. Comprender este comportamiento es crucial para evitar sorpresas y asegurar que el espaciado entre elementos se comporte como se espera. Es recomendable utilizar herramientas de desarrollo en navegadores para inspeccionar y ajustar márgenes y otros parámetros de diseño para obtener el resultado deseado.
box-sizing
box-sizing
es una propiedad CSS crucial para controlar el modelo de caja de los elementos. Por defecto, CSS utiliza el modelo de caja estándar (content-box
), donde las propiedades width
y height
se aplican solo al área de contenido de un elemento y no incluyen el relleno ni el borde. Sin embargo, este comportamiento puede ser modificado con box-sizing
.
Valores de box-sizing
content-box: Es el valor por defecto. Las propiedades width
y height
se aplican solo al contenido del elemento, excluyendo padding
y border
. Esto significa que para calcular el tamaño total de la caja, se debe añadir explícitamente padding
y border
.
border-box: Incluye padding
y border
dentro de las propiedades width
y height
. Esto simplifica el control de layout, ya que el tamaño total del elemento se define por width
y height
, sin necesidad de cálculos adicionales.
Ejemplo de uso
/* Ejemplo sin box-sizing especificado: content-box por defecto */
.sin-box-sizing {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}
/* Ejemplo con box-sizing: border-box */
.con-box-sizing {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}
Análisis de los ejemplos
- Sin box-sizing especificado (content-box):
.sin-box-sizing {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}
Aquí, las propiedades width
y height
se aplican solo al área de contenido del elemento.
Ancho total
:width
300px
Alto total
:height
150px
- Con box-sizing: border-box:
.con-box-sizing {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #3498db;
background-color: #f8f9fa;
}
Aquí, tanto padding
como border
se incluyen dentro de las propiedades width
y height
.
Ancho total
: Específicamente definido como300px
Alto total
: Específicamente definido como150px
Aplicaciones prácticas
Utilizar box-sizing: border-box
es particularmente útil cuando se trabaja en layouts responsivos y diseños con tamaños estrictamente definidos. Al incluir padding
y border
dentro de las dimensiones del elemento, se elimina la necesidad de realizar cálculos adicionales y se asegura que los elementos no desbordarán su contenedor debido a ajustes inesperados en padding
o border
.
Una buena práctica en el diseño de layouts modernos es aplicar box-sizing: border-box
globalmente:
/* Aplicar box-sizing: border-box globalmente */
*, *::before, *::after {
box-sizing: border-box;
}
Este enfoque asegura que todos los elementos, incluidos los pseudo-elementos, usen el modelo de caja border-box
, proporcionando una base consistente y predecible para la construcción de layouts.
Compatibilidad
box-sizing
es ampliamente compatible con todos los navegadores modernos, incluidas las versiones recientes de Chrome, Firefox, Safari, Edge y Opera. Sin embargo, es importante tener en cuenta las versiones más antiguas de algunos navegadores y utilizar prefijos cuando sea necesario para asegurar la compatibilidad.
/* Compatibilidad con versiones antiguas */
.elemento {
-webkit-box-sizing: border-box; /* Safari (WebKit) */
-moz-box-sizing: border-box; /* Firefox (Gecko) */
box-sizing: border-box;
}
Implementar box-sizing
de manera efectiva permite un control más preciso sobre las dimensiones de los elementos y evita problemas comunes relacionados con el cálculo de tamaños en diseños complejos.
margin auto
En CSS, la propiedad margin: auto
es una herramienta poderosa para centrar elementos dentro de un contenedor. Esto se aplica a elementos de bloque (block-level) y funciona estableciendo automáticamente la cantidad de margen necesario en los lados opuestos para centrar el elemento.
Uso de margin: auto
Para centrar horizontalmente un elemento, se debe configurar la propiedad de ancho (width
) del elemento y aplicar margin: auto
. Por ejemplo:
.centrado {
width: 50%; /* Establece un ancho específico */
margin: auto; /* Centra el elemento horizontalmente */
}
En este ejemplo, el elemento con la clase .centrado
tendrá un ancho del 50% del contenedor y se centrará horizontalmente dentro de ese contenedor.
Flexbox y margin: auto
Flexbox mejora aún más el uso de margin: auto
. Al configuar un contenedor flexible (display: flex;
) y aplicar margin: auto
a un elemento dentro de ese contenedor, podemos centrar el elemento tanto horizontalmente como verticalmente.
.contenedor-flex {
display: flex;
justify-content: center; /* Centra los elementos horizontalmente */
align-items: center; /* Centra los elementos verticalmente */
height: 100vh; /* Altura del contenedor */
}
.elemento-flex {
margin: auto; /* Aplica margen automatico */
}
Ejemplo de centrado horizontal y vertical
Veamos un ejemplo completo que muestra el uso de margin: auto
para centrar un div dentro de un contenedor tanto horizontal como verticalmente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin Auto</title>
<style>
.contenedor {
width: 80%;
height: 300px;
border: 1px solid #000;
display: flex; /* Utiliza Flexbox */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
}
.elemento {
width: 200px;
height: 100px;
background-color: lightblue;
margin: auto; /* Centro dentro del contenedor Flex */
}
</style>
</head>
<body>
<div class="contenedor">
<div class="elemento">Centrado</div>
</div>
</body>
</html>
En este ejemplo, el contenedor utiliza Flexbox para centrar el elemento hijo. La propiedad margin: auto
en el .elemento
asegura que se mantenga centrado horizontal y verticalmente.
Consideraciones adicionales
- Ancho especificado (width): La propiedad
margin: auto
funciona correctamente cuando se especifica un ancho (width
). Si el ancho no está especificado, el elemento ocupará todo el espacio disponible y los márgenes automáticos no tendrán efecto. - Compatibilidad: La propiedad
margin: auto
es ampliamente compatible con todos los navegadores modernos. No se requieren prefijos o hacks para asegurar su funcionamiento en la mayoría de los casos. - Elementos inline-block y grid: Aunque
margin: auto
es más comúnmente usado con elementos de bloque y contenedores flexibles, también puede ser utilizado dentro de elementosinline-block
y layouts de grilla (CSS hrid), cuando se desea ajustar el posicionamiento automático.
Ejemplo con CSS grid
.contenedor-grid {
display: grid;
place-items: center; /* Centra los elementos dentro de Grid */
height: 100vh;
}
.elemento-grid {
width: 150px;
height: 150px;
background-color: lightcoral;
margin: auto; /* Centro dentro del contenedor Grid */
}
<div class="contenedor-grid">
<div class="elemento-grid">Grid centrado</div>
</div>
En este último ejemplo, place-items: center
asegura que todos los elementos dentro del contenedor Grid sean centrados horizontal y verticalmente, mientras que margin: auto
en el .elemento-grid
garantiza que se mantenga centrado incluso si el tamaño del contenedor cambia.
overflow
La propiedad overflow
en CSS controla lo que sucede con el contenido que desborda el cuadro (o caja) de un elemento. Es esencial para diseñadores e desarrolladores que trabajan en layouts complejos, donde el contenido puede exceder las dimensiones del contenedor establecido.
Valores de la propiedad overflow
visible
: Es el valor por defecto. El contenido que desborda no se recorta y es visible fuera del contenedor. Esto puede causar problemas de diseño si el contenido no se maneja apropiadamente.
hidden
: El contenido que excede las dimensiones del contenedor se recorta y no se muestra. No se generan barras de desplazamiento.
.contenido-hidden {
width: 200px;
height: 100px;
overflow: hidden;
background-color: lightgray;
}
scroll
: Siempre muestra barras de desplazamiento, independientemente de si el contenido desborda o no. Esto asegura que el usuario pueda desplazarse para ver el contenido completo.
.contenido-scroll {
width: 200px;
height: 100px;
overflow: scroll;
background-color: lightblue;
}
auto
: Muestra barras de desplazamiento solo cuando el contenido desborda el contenedor. Este es el valor más comúnmente utilizado, ya que maneja de manera eficiente el contenido dinámico.
.contenido-auto {
width: 200px;
height: 100px;
overflow: auto;
background-color: lightgreen;
}
Ejemplos de uso
Ejemplo con overflow visible
<div class="contenido-visible">
<p>Contenido con overflow visible</p>
</div>
<style>
.contenido-visible {
width: 100px;
height: 50px;
overflow: visible;
background-color: lightcoral;
}
</style>
En este caso, el contenido del párrafo continuará siendo visible fuera de los bordes del contenedor si excede el tamaño especificado.
Ejemplo con overflow hidden
<div class="contenido-hidden">
<p>Contenido con overflow hidden. Este contenido es demasiado largo y se recortará.</p>
</div>
<style>
.contenido-hidden {
width: 100px;
height: 50px;
overflow: hidden;
background-color: lightgray;
}
</style>
Aquí, cualquier contenido que exceda las dimensiones del contenedor será recortado y no será visible.
Ejemplo con overflow scroll
<div class="contenido-scroll">
<p>Contenido con overflow scroll. Este contenido es demasiado largo y mostrará barras de desplazamiento para verlo.</p>
</div>
<style>
.contenido-scroll {
width: 200px;
height: 100px;
overflow: scroll;
background-color: lightblue;
}
</style>
En este ejemplo, se mostrarán barras de desplazamiento incluso si el contenido no desborda, permitiendo al usuario desplazarse dentro del contenedor.
Ejemplo con overflow auto
<div class="contenido-auto">
<p>Contenido con overflow auto. Este contenido es largo y mostrará barras de desplazamiento solo si es necesario.</p>
</div>
<style>
.contenido-auto {
width: 200px;
height: 100px;
overflow: auto;
background-color: lightgreen;
}
</style>
Con overflow: auto
, las barras de desplazamiento solo aparecen si el contenido realmente lo requiere.
Control de overflow en ambos ejes
Además de overflow
, CSS proporciona propiedades más específicas para controlar el desbordamiento en cada eje individual:
overflow-x
: Controla el desbordamiento horizontal.overflow-y
: Controla el desbordamiento vertical.
.horizontal-scroll {
width: 200px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
background-color: lightyellow;
}
Consideraciones adicionales
- Desempeño y usabilidad: Las barras de desplazamiento pueden afectar tanto el diseño como la usabilidad de una página web. Es crucial testear en varios dispositivos y escenarios para asegurar una experiencia de usuario óptima.
- Interacción con otras propiedades: Las propiedades
overflow
pueden interactuar con otras propiedades CSS comoposition
,z-index
, yclip
, afectando la visibilidad y el flujo del contenido de maneras complejas. Verifica tus diseños con distintas combinaciones para evitar conflictos. - Scrolling interno: Para elementos que tienen contenido dinámico,
overflow: auto
es generalmente una buena opción, ya que proporciona un comportamiento predecible y maneja bien las variaciones de contenido.
<div class="tarjeta">
<div class="contenido-auto">
<p>Contenido de scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<style>
.tarjeta {
width: 300px;
padding: 1em;
border: 2px solid #ccc;
background-color: #fff;
}
.contenido-auto {
width: 100%;
height: 150px;
overflow: auto;
background-color: #f9f9f9;
}
</style>
Este ejemplo muestra una tarjeta con un contenedor de contenido desplazable, utilizando overflow: auto
para manejar el contenido dinámico de manera eficiente.
Controlar el flujo del contenido y los desbordamientos dentro de las cajas en CSS es esencial para un diseño limpio y funcional. El uso adecuado de la propiedad overflow
y sus variantes proporciona flexibilidad y precisión en el manejo del layout y la presentación del contenido.
display
La propiedad display
en CSS es fundamental para definir cómo se comportan y visualizan los elementos en el flujo de documentos. Controla el tipo de caja en la que se presenta un elemento y su interacción con otros elementos en el diseño de la página. Los valores más utilizados de display
son block
, inline
, inline-block
, flex
, grid
, y none
.
display: block
Un elemento con display: block
se renderiza como un bloque, ocupando todo el ancho horizontal disponible. Estos elementos inician en una nueva línea y tienen un margen superior e inferior.
.bloque {
display: block;
width: 100%;
background-color: lightblue;
}
Ejemplo en HTML:
<div class="bloque">Soy un bloque</div>
<div class="bloque">Soy otro bloque</div>
display: inline
Con display: inline
, el elemento se comporta como texto. No inicia una nueva línea y solo ocupa el ancho necesario. Los márgenes y rellenos verticales no afectan su flujo.
.en-linea {
display: inline;
background-color: lightgreen;
}
Ejemplo en HTML:
<span class="en-linea">Soy un elemento en línea</span>
<span class="en-linea">Otro elemento en línea</span>
display: inline-block
display: inline-block
combina características de block
y inline
. Los elementos inline-block permiten especificar un ancho y alto, pero fluyen en línea con otros elementos en lugar de comenzar en una nueva línea.
.en-linea-bloque {
display: inline-block;
width: 150px;
height: 100px;
background-color: lightcoral;
}
Ejemplo en HTML:
<div class="en-linea-bloque">Soy un inline-block</div>
<div class="en-linea-bloque">Otro inline-block</div>
display: flex
display: flex
activa el modo de caja flexible (flexbox), permitiendo un diseño de distribución complejo y responsivo con alineación y tamaño de los elementos hijos dentro de un contenedor flexible.
.contenedor-flex {
display: flex;
justify-content: space-between;
background-color: lightgray;
}
.item-flex {
background-color: lightyellow;
padding: 10px;
margin: 5px;
}
Ejemplo en HTML:
<div class="contenedor-flex">
<div class="item-flex">Elemento 1</div>
<div class="item-flex">Elemento 2</div>
<div class="item-flex">Elemento 3</div>
</div>
display: grid
display: grid
utiliza el modelo de diseño de grillas (CSS grid), permitiendo la construcción de diseños de grilla bidimensionales sofisticados.
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: lightgoldenrodyellow;
}
.item-grid {
background-color: lightpink;
padding: 10px;
}
Ejemplo en HTML:
<div class="contenedor-grid">
<div class="item-grid">Item 1</div>
<div class="item-grid">Item 2</div>
<div class="item-grid">Item 3</div>
<div class="item-grid">Item 4</div>
</div>
display: none
display: none
oculta un elemento completamente. No se renderiza en la página y no ocupa espacio en el flujo del documento.
.oculto {
display: none;
}
Ejemplo en HTML:
<div class="oculto">No soy visible</div>
<div>Soy visible</div>
Otros valores de display
inline-flex
: Combina propiedades deinline
conflex
.table
,table-row
,table-cell
: Simulan el comportamiento de las tablas HTML.list-item
: Comporta el elemento como un elemento de lista.
Manipulación de display con JavaScript
Podemos cambiar el valor de display
dinámicamente con JavaScript para lograr interacciones y comportamientos avanzados.
// Mostrar un elemento oculto
document.querySelector('.oculto').style.display = 'block';
// Ocultar un elemento
document.querySelector('.visible').style.display = 'none';
La propiedad display
es crucial para controlar cómo se presentan los elementos en una página y es fundamental en la construcción de interfaces web responsivas y bien estructuradas.
Ejemplo completo
Vamos a desarrollar un ejemplo completo que incluye múltiples aspectos del modelo de caja en CSS, incluido el box-sizing
, el margin
auto, el overflow
, y display
. Este ejemplo unirá todos los conceptos tratados para mostrar cómo interactúan entre sí en un contexto real.
HTML
Primero, crearemos una estructura de HTML con varios elementos de bloque, contenedor y elementos hijos. Utilizaremos clases para aplicar estilos CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo completo del modelo de caja en CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="contenedor-principal">
<div class="cabecera">Cabecera</div>
<div class="contenido">
<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>
</div>
<div class="pie">Pie de página</div>
</div>
</body>
</html>
CSS
Ahora, aplicaremos estilos CSS para cada clase en nuestro HTML. Abarcaremos varios conceptos como box-sizing
, margin: auto
, overflow
, y display
.
/* Global box-sizing */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f4f4f4;
}
.contenedor-principal {
width: 80%;
max-width: 800px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.cabecera,
.pie {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px 0;
}
.contenido {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
gap: 20px;
}
.caja {
width: 100%;
max-width: 300px;
padding: 20px;
background-color: #e0e0e0;
border: 2px solid #bbb;
margin: auto;
overflow: hidden;
text-align: center;
}
.caja:nth-child(even) {
background-color: #d0d0d0;
}
Explicación de CSS
Global box-sizing: Aplicamos box-sizing: border-box
globalmente para que todos los elementos incluyan padding
y border
en las dimensiones definidas por width
y height
.
* ,
*::before,
*::after {
box-sizing: border-box;
}
Centrado del contenido principal: El body
utiliza Flexbox para centrar el contenedor-principal
tanto horizontal como verticalmente.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f4f4f4;
}
Contenedor principal: Configuramos el contenedor-principal
para ser un contenedor flexible que contiene la cabecera, contenido y pie de página.
.contenedor-principal {
width: 80%;
max-width: 800px;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
Cabecera y pie de página: Se estilizan con un fondo azul (#3498db
), texto blanco y se centran dentro del contenedor principal.
.cabecera,
.pie {
background-color: #3498db;
color: white;
text-align: center;
padding: 20px 0;
}
Contenido: Utilizamos Flexbox para organizar las cajas
verticalmente con espacio entre ellas.
.contenido {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
gap: 20px;
}
Caja: Cada caja tiene width
, padding
, background-color
, border
. Utilizamos margin: auto
para centrar horizontalmente cada caja dentro del contenedor.
.caja {
width: 100%;
max-width: 300px;
padding: 20px;
background-color: #e0e0e0;
border: 2px solid #bbb;
margin: auto;
overflow: hidden;
text-align: center;
}
Visualización
Este ejemplo completo muestra cómo combinar múltiples propiedades del modelo de caja en CSS para crear un layout estructurado y adaptativo. El uso de display: flex
en el contenedor principal y el contenido permite una distribución equitativa y centrada, box-sizing: border-box
facilita el control de los tamaños de los elementos, y margin: auto
ayuda a alinear las cajas. Este enfoque asegura que el diseño sea manejable y visualmente coherente a través de diferentes dispositivos.
Ejercicios de esta lección Modelo de caja
Evalúa tus conocimientos de esta lección Modelo de caja con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender los componentes del modelo de caja en CSS.
- Aprender a calcular el tamaño total de un elemento con el modelo de caja.
- Maquetar correctamente usando las propiedades
content
,padding
,border
ymargin
. - Utilizar
box-sizing
para simplificar el control del diseño. - Visualizar y ajustar gráficamente los componentes de una caja.
- Aplicar la propiedad
margin: auto
para centrar elementos. - Gestionar el desbordamiento del contenido con
overflow
. - Usar diferentes valores de
display
para afectar el flujo del documento.