Ejemplo
Especificar que <div> elementos deben tener el relleno y el borde incluidos en el total anchura y la altura del elemento:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad box-encolado se usa para decirle al navegador qué las propiedades de tamaño (width and height) deben incluir.
En caso de que incluya la caja de frontera? O simplemente el contenido de la caja (que es el valor por defecto de las propiedades de anchura y altura)?
| Valor por defecto: | content-box |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.boxSizing="border-box" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
sintaxis CSS
box-sizing: content-box|border-box|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| content-box | Defecto. Las propiedades de anchura y altura (and min/max properties) incluye sólo el contenido. Frontera, relleno, o el margen no están incluidos |
| border-box | Las propiedades de anchura y altura (and min/max properties) incluye el contenido, el relleno y el borde, pero no el margen |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Especificar dos cajas bordeado lado a lado:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Inténtalo tú mismo " Páginas relacionadas
CSS3 tutorial: CSS3 caja de medición
Referencia HTML DOM: boxSizing property