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-boxes 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 Código CSS: En el siguiente ejemplo, mostraremos tres casos, y en cada caso había un elemento elemento principal del contenedor elemento contenedor chico
box-sizing: content-box; elemento principal contenedor elemento contenedor chico
box-sizing: content-box; elemento principal contenedor elemento contenedor chico
box-sizing: border-box; Código CSS: Algunos navegadores (como Chrome, Firefox y Safari) admitían esta función en sus versiones anteriores, pero con una versión anterior Esta característica tenía un valor adicional que es La propiedad acepta Este es el valor predeterminado en la especificación CSS. Si las dos propiedades están configuradas 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. Si se toma este valor , significa que las dimensiones exactas en todas las propiedades 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 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.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 < br > < div class = "border-box" > frontera cuadro
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;
}width: 100%y tiene un fondo azul transparente.content-box, el elemento hijo no tenía marco ni nota al pie, y apareció dentro del elemento padre sin problemas.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.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.
width: 100%;
padding: 0;
border-width: 0;
width: 100%;
padding: 5px;
border-width: 10px;
width: 100%;
padding: 5px;
border-width: 10px;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 -webkit-o -moz-.padding-box, pero se descuida y se omite en la mayoría de los navegadores modernos.Estructura General del Box Sizing
box-sizing un valor que es una palabra reservada de las palabras que se enumeran a continuación.content-boxwidth 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.border-boxwidth 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.border-box para hacer desaparecer el elemento.Estructura formal
box-sizing: content-box | border-box
