Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Introducción
La propiedad box-sizing se usa para modificar las propiedades por defecto del CSS box model que calculan el alto y el ancho de los elementos . De hecho es posible usarla para emular el comportamiento de los navegadores que no soportan las especificaciónes del CSS box model.
| Valor inicial | content-box |
|---|---|
| Applies to | all elements that accept width or height |
| Heredable | no |
| Media | visual |
| Valor calculado | como se especifica |
| Animatable | no |
| Canonical order | el orden único no-ambigüo definido por la gramática formal |
Syntax
box-sizing: content-box; box-sizing: padding-box; box-sizing: border-box; box-sizing: inherit;
Valores
content-box- Este es el estilo por defecto especificado en el estándar de CSS . Las propiedades
widthyheightson las medidas incluídas solo en el contenido, pero no incluyen el padding, el border o el margin. Por ejemplo, el elemento .box {width: 300px; border: 10px solid black; padding: 10px; } cuando sea interpretado por el navegador tendrá un width de 340px (resultado de la suma del border, el padding y el width). padding-box- En este caso las propiedades
widthyheightincluyen en padding pero no incluyen el border y el margin. border-box-
El
widthy elheightincluyen el padding y el border, pero no el margin. Volviendo al primer ejemplo, si usaramos border-box en el elemento .box {width: 300px; border: 10px solid black; padding: 10px; -moz-box-sizing: border-box; box-sizing: border-box; } tendrá un width de 300px después de ser interpretado por el navegador.
Sintaxis formal
content-box | border-box
Ejemplos
/* support Firefox, WebKit, Opera and IE8+ */
.example {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Especificaciones
| Especificaciones | Estatus | Comentario |
|---|---|---|
| CSS Basic User Interface Module Level 3 The definition of 'box-sizing' in that specification. |
Candidate Recommendation |
Compatibilidad con los navegadores
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | 1.0 -webkit [1] 10.0 |
1.0 (1.7 or earlier)-moz[1] 29.0 (29.0) |
8.0 [1] |
7.0 | 3.0 (522)-webkit 5.1 (534.12) |
padding-box |
Not supported | 1.0 (1.0) | Not supported | Not supported | Not supported |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Soporte básico | 2.1-webkit [1] 4.0 |
1.0 (1.0)-moz [1] 29.0 (29.0) |
Mango 7.5 | (Yes) | (Yes) |
padding-box |
Not supported | 1.0 (1.0) | Not supported | Not supported | Not supported |
Notas
[1] box-sizing no aplica para el cálculo de la altura height window.getComputedStyle(), en Internet Explorer, en Firefox anterior 23, y en Chrome. Nota: En IE9's se puede usar la propiedad particular currentStyle y nos da un correcto rendereo del height.