
Tabla de contenidos
La propiedad y características del box-sizing
en CSS se utiliza para modificar el modelo de caja CSS predeterminado (es decir, el modelo de caja CSS) utilizado para calcular tanto el ancho y la altura de los elementos el box sizing.
Valor inicial | content-box |
---|---|
Aplicado a | Todos los elementos en los que se puede especificar un valor para la propiedad width y en height . |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó |
/* palabras reservadas */ box-sizing: content-box; box-sizing: border-box; /* valores globales */ box-sizing: inherit; box-sizing: initial; box-sizing: unset;
De forma predeterminada, el ancho y el alto se aplican al cuadro de contenido del elemento, y si el elemento tiene un marco ( border
) o una nota al pie ( padding
). Este se agregará al ancho y alto para completar las dimensiones del elemento que se muestra en la pantalla. Esto significa que cuando establece el ancho y el alto debe tener en cuenta el valor de la nota al pie y un marco si los agrega, lo cual es especialmente difícil cuando el diseño de su página es receptivo.
La propiedad se puede utilizar box-sizing
para modificar este comportamiento:
- El valor
content-box
es el valor predeterminado que le proporciona el comportamiento predeterminado descrito anteriormente. Por ejemplo, si configuramos el ancho de un elemento en 100px, entonces el ancho del cuadro de contenido será igual a 100 px. Luego el ancho del marco y la nota al pie se agregarán para formar las dimensiones finales del elemento.
El valor border-box
le dice al navegador que tenga en cuenta el valor del ancho del marco y la nota al pie al especificar el ancho y el alto. Es decir, si establecemos el ancho de un elemento en 100 píxeles, este valor incluirá el ancho del marco y la nota al pie. Pero el cuadro de contenido se redimensiona de acuerdo con el valor del marco o nota al pie, y este valor facilita la determinación de las dimensiones de los elementos.
Ejemplo del Box Sizing
En el siguiente ejemplo, creamos <div>
dos elementos con las mismas dimensiones ( width
y height
), la misma nota al pie ( padding
) y el mismo marco ( border
), pero el valor de propiedad box-sizing
entre ellos es diferente, y la diferencia entre ellos será obvia:
< div class = "Content-box" > contenido de la caja </ div > < br > < div class = "border-box" > frontera cuadro </ div >
Código CSS:
div { width: 140px; height: 60px; padding: 20px; border: 8px solid salmon; background: #006099; color: white; } .content-box { box-sizing: content-box; } .border-box { box-sizing: border-box; }
En el siguiente ejemplo, mostraremos tres casos, y en cada caso había un elemento <div>
padre (con un marco naranja) que contiene un <div>
elemento hijo, y el elemento hijo tiene la base width: 100%
y tiene un fondo azul transparente.
- En el primer ejemplo usamos el valor predeterminado
content-box
, el elemento hijo no tenía marco ni nota al pie, y apareció dentro del elemento padre sin problemas. - En el segundo ejemplo, usamos el valor predeterminado
content-box
, pero agregamos una nota al pie y un marco al elemento secundario. Notaremos cómo el elemento secundario salió del elemento principal porque el ancho dado es solo el ancho del cuadro de contenido, luego se le agregó el valor del ancho del marco y la nota al pie. - En el tercer ejemplo, usamos el valor
border-box
y el elemento hijo se expandió en el elemento padre sin problemas, porque el valor de ancho (100%
) ahora incluye la nota al pie y el marco.
<div class="container"> <div class="parent"> <p> elemento principal del contenedor </p> <div class="child" style="box-sizing: content-box;"> <p> elemento contenedor chico </p> <p class="css"> box-sizing: content-box;<br/> width: 100%;<br/> padding: 0;<br/> border-width: 0;</p> </div> </div> <div class="parent"> <p> elemento principal contenedor </p> <div class="child border-padding" style="box-sizing: content-box;"> <p> elemento contenedor chico </p> <p class="css"> box-sizing: content-box;<br/> width: 100%;<br/> padding: 5px;<br/> border-width: 10px;</p> </div> </div> <div class="parent"> <p> elemento principal contenedor </p> <div class="child border-padding" style="box-sizing: border-box;"> <p> elemento contenedor chico </p> <p class="css"> box-sizing: border-box;<br/> width: 100%;<br/> padding: 5px;<br/> border-width: 10px;</p> </div> </div> </div>
Código CSS:
p { margin-left: 0.2em; } .container { display: flex; } .parent { width: 220px; border: solid 10px orange; margin: 0.8em; } .child { width: 100%; margin: 2em auto; background-color: rgba(229, 232, 252, 0.6); } .border-padding { padding: 5px; border: solid #5B6DCD 10px; } .css { font-family: monospace; }
Soporte de navegadores
Característica | Chrome | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 10.0 | 29,0 | 8.0 | 7.0 | 5.1 |
Algunos navegadores (como Chrome, Firefox y Safari) admitían esta función en sus versiones anteriores, pero con una versión anterior -webkit-
o -moz-
.
Esta característica tenía un valor adicional que es padding-box
, pero se descuida y se omite en la mayoría de los navegadores modernos.
Estructura General del Box Sizing
La propiedad acepta box-sizing
un valor que es una palabra reservada de las palabras que se enumeran a continuación.
content-box
Este es el valor predeterminado en la especificación CSS. Si las dos propiedades están configuradas width
y height
representarán las dimensiones del cuadro de contenido, sin ingresar el marco border
, nota al pie padding
o márgenes margin
, es decir, si decimos que el ancho de un elemento es 350 píxeles, entonces establecemos el ancho del marco (en todos bordes) igual al valor de 10 píxeles, el ancho del elemento visible final será de 370 píxeles.
Conclusión: El ancho dado es solo el ancho del cuadro de contenido, y la altura dada es solo el alto del cuadro de contenido.
border-box
Si se toma este valor , significa que las dimensiones exactas en todas las propiedades width
y height
son las dimensiones finales del elemento, incluido el contenido y el marco del cuadro de nota al pie, pero sin ingresar márgenes.
Si decimos que el ancho de un elemento es 350px, y luego establecemos el ancho del marco (en todos los bordes) en 10px, el ancho del elemento final mostrado será 350px. Tenga en cuenta que las dimensiones del cuadro de contenido no pueden ser negativas, y los valores negativos se redondeará a 0, es decir, no se pueden utilizar border-box
para hacer desaparecer el elemento.
En pocas palabras: el ancho dado es el ancho de todo el elemento, y la altura dada es la altura de todo el elemento. Incluye caja de contenido, ribete y marco.
Estructura formal
<strong>box-sizing: content-box | border-box</strong>
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript