Podcast del CSS - 001: El modelo de la caja
Supongamos que tienes este código HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Luego, escribe este CSS para él:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
El contenido termina en 142 px de ancho, en vez de los 100 px que especificaste, y sale de tu elemento. ¿A qué se debe?
El modelo de caja es la base central de CSS. Comprender cómo el modelo de caja cómo funciona, cómo se ve afectado por otros aspectos de CSS cómo puedes controlarlo, puede ayudarte a escribir CSS más predecibles.
Es importante recordar que todo lo que muestra CSS es un cuadro, incluso si
es solo texto o tiene un elemento border-radius que hace que parezca un círculo.
Contenido y tamaño
Los cuadros tienen un comportamiento diferente según su valor de display, su conjunto
dimensiones y contenido que contienen. Este contenido puede ser texto sin formato
más cuadros generados por elementos secundarios. De cualquier manera, el contenido afecta el tamaño
del cuadro de forma predeterminada.
Esto se puede controlar mediante el tamaño extrínseco o el tamaño intrínseco. para que el navegador tome decisiones por ti según el tamaño del contenido.
Esta es una demostración básica en la que se explica la diferencia:
La demostración tiene las palabras "CSS es increíble". en una caja con dimensiones fijas y una
borde grueso. Debido a que el cuadro tiene un ancho especificado, tiene un tamaño extrínseco.
Esto significa que controla el tamaño del contenido secundario. Sin embargo, la palabra
“increíble” es demasiado grande para la caja, por lo que sobrepasa fuera del cuadro superior
cuadro de borde (más información sobre este tema más adelante). Una forma de prevenir este desbordamiento es permitir
para que la caja tenga un tamaño
intrínseco, ya sea sin establecer el ancho o, en este caso,
Estableciendo el width en min-content La palabra clave min-content le indica al cuadro
sea tan ancho como el ancho mínimo intrínseco de su contenido (la palabra
"increíble"). Esto permite que el cuadro se ajuste perfectamente al texto.
Este es un ejemplo más complejo que muestra el impacto de los diferentes tamaños en el tamaño real contenido:
Activa o desactiva el tamaño intrínseco para ver cómo el tamaño extrínseco te da más y control de tamaño extrínseco y de tamaño intrínseco le da al contenido más control. Para ver los efectos, agrega algunas oraciones de texto a la tarjeta. Cuando este elemento tiene un tamaño extrínseco, existe un límite para la cantidad de contenido que puede agregar antes de que se desborde, pero eso no sucede cuando el tamaño intrínseco se activado.
De forma predeterminada, este elemento tiene un conjunto width y height de 400px cada uno.
Estas dimensiones otorgan límites estrictos a todo lo que está dentro del elemento, que se
a menos que el contenido
sea demasiado grande para el cuadro. Puedes ver esto en acción
cambiando la leyenda debajo de la imagen de la flor por algo que exceda el
la altura de la caja.
Término clave: El desbordamiento se produce cuando el contenido es demasiado grande para la caja en la que se encuentra. Puedes
Administra la forma en que un elemento controla el contenido desbordado con la propiedad overflow.
Cambiar al tamaño intrínseco permite al navegador tomar decisiones por ti en función de el tamaño del contenido del cuadro. Esto hace que sea mucho menos probable el desbordamiento, ya que la caja cambia de tamaño con su contenido.
Es importante recordar que el tamaño intrínseco es el valor predeterminado del navegador. y, por lo general, proporciona mucha más flexibilidad que el tamaño extrínseco.
Las áreas del modelo de caja
Las cajas se componen de distintas áreas de modelos de cajas que cumplen una función específica.
El cuadro de contenido es el área donde se encuentra el contenido. El contenido puede controlar el tamaño de su elemento superior, por lo que suele ser el área de tamaño más variable.
El cuadro de relleno rodea el cuadro de contenido y es el espacio creado por
La propiedad padding
Debido a que el padding está dentro del cuadro, el fondo del cuadro se puede ver en el espacio.
que crea.
Si el cuadro tiene reglas de desbordamiento configuradas, como overflow: auto o
overflow: scroll, las barras de desplazamiento también ocupan este espacio.
El cuadro de borde rodea el cuadro de relleno, y su espacio se define por
valor border, que
crea un marco visual para el elemento. El borde del borde del elemento es el
límite de lo que puedes ver.
El área final, el cuadro de margen, es el espacio alrededor del cuadro, definido por
regla margin del cuadro. Propiedades como
outline y
box-shadow
también ocupan este espacio porque están
pintadas sobre el elemento y no
afectará el tamaño de la caja. Cambia el outline-width de 200px de tu caja el
un cuadro no cambia nada dentro del borde del borde.
Una analogía útil
El modelo de caja es complejo de entender, así que aquí hay una analogía de lo que aprendido hasta ahora.
En este diagrama, hay tres marcos de fotos montados uno al lado del otro en una pared. Los elementos de la imagen enmarcada corresponden al modelo de cuadros de la siguiente manera:
- El cuadro de contenido es el material gráfico.
- La caja de relleno es la placa de montaje blanca, entre el marco y las obras de arte.
- El cuadro del borde es el marco, que proporciona un borde literal para el material gráfico.
- El cuadro de margen es el espacio entre los marcos.
- La sombra ocupa el mismo espacio que el cuadro de margen.
Depura el modelo de caja
Las Herramientas para desarrolladores del navegador proporcionan una visualización del modelo de cuadro de un cuadro seleccionado cálculos, que pueden ayudarte a entender cómo funciona el modelo de caja y cómo afecta el sitio web en el que estás trabajando.
Pruébalo en tu propio navegador:
- Abre Herramientas para desarrolladores.
- Selecciona un elemento.
- Mostrar el depurador del modelo de cuadros.
Controla el modelo de caja
Para entender cómo controlar el modelo de caja, primero debe comprender qué se ejecute en tu navegador.
Cada navegador aplica una hoja de estilo del usuario-agente a los documentos HTML que define cómo deben verse y comportarse los elementos si no tienen una CSS definida. El CSS en Las hojas de estilo del usuario-agente varían según el navegador, pero proporcionan predeterminadas para que el contenido sea más fácil de leer.
Una propiedad, la hoja de estilo del usuario-agente establece el display predeterminado de un cuadro. Para
ejemplo, en un flujo normal, el valor predeterminado de display de un elemento <div> es
block, un <li> tiene un valor predeterminado de display de list-item, y un <span>
tiene un valor predeterminado de display de inline.
Un elemento inline tiene un margen de bloqueo, pero otros elementos no lo respetan.
Con inline-block, los demás elementos respetan el margen del bloque, pero el primero
conserva la mayoría de los mismos comportamientos que tenía como un elemento inline.
Un elemento block llena el espacio intercalado disponible de forma predeterminada, mientras que
Los elementos inline y inline-block son tan grandes como su contenido.
La hoja de estilo del usuario-agente también configura box-sizing, que le indica al cuadro cómo
calcular su tamaño de caja. De forma predeterminada, todos los elementos tienen el siguiente usuario-agente
estilo: box-sizing: content-box;. Esto significa que cuando estableces dimensiones como
como width y height, esas dimensiones se aplican al cuadro de contenido. Si
luego, estableces padding y border, estos valores se agregan a la carpeta
de tamaño del ensamble.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre las propiedades que afectan el tamaño del modelo de caja.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
¿Qué ancho crees que tendrá .my-box?
200px sería correcto si
la caja tenía box-sizing: border-box.
El ancho real de este cuadro es de 260 px.
Debido a que el CSS usa el box-sizing: content-box predeterminado, el ancho aplicado es de
el ancho del contenido, y se agregan padding y border en ambos lados a
sobre eso. 200 px para el contenido + 40 px de relleno + 20 px de borde hacen un total
el ancho visible de 260 px
Puedes cambiar esto especificando el tamaño border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Este modelo de cuadro alternativo le indica a CSS que aplique el width al cuadro del borde.
en lugar de en el cuadro de contenido. Esto significa que nuestro border y padding obtienen
se envió, por lo que, cuando configuras .my-box para que tenga un ancho de 200px, en realidad se renderiza
con un ancho de 200px.
Mira cómo funciona en la siguiente demostración interactiva. Al activar o desactivar el
box-sizing, el área azul muestra qué CSS se está aplicando dentro del
.
*,
*::before,
*::after {
box-sizing: border-box;
}
Esta regla de CSS selecciona todos los elementos del documento
y cada seudoelemento ::before y ::after, y aplica box-sizing: border-box.
Esto significa que ahora cada elemento usa este modelo de cuadro alternativo.
Debido a que el modelo de caja alternativo puede ser más predecible, los desarrolladores suelen agregar esta regla a restablecimientos y normalizadores, como este.