Manual de referencia CSS

reglas CSS @

大全 de Atributos CSS

CSS caption-Atributo side CSS3 box-Atributo shadow

CSS3 box-Métodos de uso y ejemplos de la propiedad sizing

box-La propiedad CSS sizing se utiliza para cambiar el valor predeterminadoModelo de caja de CSS,los navegadores generalmente utilizan este modelo para calcular el ancho y la altura de los elementos.

La tabla a continuación proporciona una descripción del uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.

Valor predeterminado:	content-box
Aptitud:	Todos los elementos que aceptan anchura o altura
Herencia:	No
Animable:	No Ver propiedades de animación.
Versión:	CSS3nueva característica
Sintaxis de JavaScript:	object.style.boxSizing="border-box"

box-Sintaxis de uso de sizing

La sintaxis de este atributo es la siguiente:

box-sizing:　content-box　|　padding-box　|　border-box　|　initial　|　inherit

Los siguientes ejemplos demuestran cómo usar box-propiedad sizing.

Ejemplo

.box　{
　　　　width:　50%;
　　　　padding:　15px;
　　　　float:　left;
　　　　border:　5px　solid　#000;
　　　　box-sizing:　border-box;
}

Ver el ejemplo‹/›

Valores del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
content-box	Los valores de width y height especificados solo incluyen el contenido del elemento. No incluye relleno, borde o márgen.
relleno-box	Los valores de width y height especificados incluyen el tamaño del relleno, pero no el borde o la márgen.
borde-box	Los valores de width y height especificados incluyen el relleno y el borde, pero no la márgen.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el box del elemento padre-Valores del atributo sizing.

Compatibilidad del navegador

box-La compatibilidad del navegador del atributo sizing, los números en la tabla a continuación representan la versión mínima del navegador que admite esta propiedad; todos los navegadores principales admiten esta propiedad.

	Firefox 2+ ^-moz-,29+ Google Chrome 4+ ^-webkit-,10+ Internet Explorer 8+ Apple Safari 3.2+ ^-webkit-,5.1 + Opera 9.5+

Leer más

Por favor, consulte los tutoriales relacionados con el siguiente contenido:Modelo de caja de CSS,Tamaño de CSS.

Propiedades relacionadas:relleno,borde,margen.

CSS caption-Atributo side CSS3 box-Atributo shadow