Atributo de estilo boxSizing

definición y uso

boxSizing el atributo le permite definir de manera específica un elemento que coincida con una área específica.

Por ejemplo, si necesita colocar dos cuadros con bordes alineados, puede establecer box-sizing en "border-box". Esto permitirá que el navegador muestre cuadros con anchos y alturas especificados, y colocará los bordes y los márgenes internos dentro del cuadro.

Vea también:

Manual de referencia de CSS:box-sizing atributo

ejemplo

Cambiar el atributo boxSizing:

document.getElementById("myDIV").style.boxSizing = "border-box";

Pruebe usted mismo

sintaxis

Devolver el atributo boxSizing:

objeto.style.boxSizing

Configurar el atributo boxSizing:

objeto.style.boxSizing = "content-box|border-box|initial|inherit"

valor del atributo

valor descripción
content-box

valor predeterminado. Esto es el comportamiento de los anchos y alturas especificados en CSS2.1.

El ancho y la altura especificados (así como las propiedades min/max) se aplican al ancho y la altura del cuadro de contenido del elemento.

El alineamiento y el dibujo de los márgenes internos y los bordes del elemento se realiza fuera del ancho y la altura especificados.
border-box

El ancho y la altura establecidos para el elemento determinan el cuadro del borde del elemento.

Es decir, cualquier margen interno y borde especificado para el elemento se dibujará dentro del ancho y la altura establecidos.

Para obtener el ancho y la altura del contenido, debe restar el ancho y la altura de los bordes y los márgenes al ancho y la altura establecidos.
initial Establezca este atributo en su valor predeterminado. Consulte initial。
inherit Hereda este atributo de su elemento padre. Consulte inherit。

detalles técnicos

valor predeterminado: content-box
valor de retorno: cadena que representa el box-sizing atributo。
Versión de CSS: CSS3

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte