Tamaño de caja CSS3
La box-sizingpropiedad CSS3 se puede configurar para incluir relleno (relleno) y borde (borde) en las propiedades de ancho y alto.
Soporte del navegador
El número en la tabla indica el número de versión del primer navegador que admite este atributo.
El -webkit- o -moz- que sigue inmediatamente al número es el prefijo del navegador especificado.
| Atributos | |||||
|---|---|---|---|---|---|
| tamaño de caja | 10.0 4.0 -kit web- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -kit web- |
9.5 |
No use la propiedad de tamaño de caja CSS3
Por defecto, el ancho y el alto de un elemento se calculan de la siguiente manera:
ancho + relleno + borde = ancho real del elemento
altura (altura) + relleno (relleno) + borde (borde) = la altura real del elemento
Esto significa que cuando establecemos el ancho / alto del elemento, la altura y el ancho reales del elemento serán mayores (porque el borde y el relleno del elemento también se calcularán en el ancho / alto).
Aunque los dos elementos <div> anteriores tienen la misma configuración de ancho y alto, el tamaño de visualización real es inconsistente porque div2 especifica el relleno:
Ejemplos
ancho: 300px;
altura: 100 px;
borde: 1px azul sólido;
}
.div2 {
ancho: 300px;
altura: 100 px;
acolchado: 50px;
borde: 1px rojo sólido;
}
De esta manera, si desea obtener el marco más pequeño e incluir relleno, debe considerar el ancho del borde y el relleno.
El CSS3 box-sizingatribuye una buena solución a este problema.
Usar la propiedad de tamaño de caja CSS3
El box-sizingatributo CSS3 contiene relleno y borde en el ancho y alto de un elemento.
Si se proporciona el elemento en box-sizing: border-box;el relleno (relleno) y un borde (borde) de ancho y la altura también se incluyen en:
Los siguientes son dos <div> para box-sizing: border-box;un atributo de instancia sencilla.
Ejemplos
ancho: 300px;
altura: 100 px;
borde: 1px azul sólido;
tamaño de la caja: border-box;
}
.div2 {
ancho: 300px;
altura: 100 px;
acolchado: 50px;
borde: 1px rojo sólido;
tamaño de la caja: border-box;
}
Desde el punto de vista de resultados box-sizing: border-box;mejores, sino que también es una gran cantidad de desarrolladores necesitan resultados.
El siguiente código permite que todos los elementos muestren el tamaño de una manera más intuitiva. Muchos navegadores ya lo admiten box-sizing: border-box;(pero no todos, es por eso que el ancho de los elementos de entrada y texto está establecido en 100%; el ancho no es el mismo).
Se recomienda utilizar el tamaño de caja para todos los elementos:
Ejemplos
tamaño de caja: border-box;
}