Tamaño de la caja de CSS3
CSS3 box-sizing de propiedades para establecer la anchura y la altura de atributos contiene el relleno (padding) y la frontera (frontera).
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de propiedad.
Inmediatamente después del navegador el número -webkit- o prefijo -moz- especificado.
| propiedad | |||||
|---|---|---|---|---|---|
| cuadro de dimensionamiento | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
No utilice la propiedad CSS3 cuadro de dimensionamiento
Por defecto, el ancho y el elemento de cálculo manera de gama alta es el siguiente:
ancho (ancho) + el relleno (padding) + frontera (frontera) = elementos anchura real
altura (altura) + el relleno (padding) + frontera (frontera) = altura real del elemento
Esto significa que cuando fijamos el elemento de anchura / altura, la altura de la pantalla y ancho del elemento serían mayores (a causa de elemento de frontera con el acolchado calculará anchura / altura en).
Estos elemento <div> dos, aunque la anchura y la altura ajustes de la misma, pero el tamaño de la muestra verdadera inconsistente porque div2 de relleno especificado:
Ejemplos
Anchura: 300px;
altura: 100px;
frontera: 1px sólido de color azul;
}
.div2 {
Anchura: 300px;
altura: 100px;
padding: 50px;
frontera: 1px solid rojo;
}
Trate »
Si desea utilizar este método para obtener la caja más pequeña y contiene dentro de los márgenes, hay que tener en cuenta la frontera y dentro de la anchura de margen.
El CSS3 box-sizing la propiedad una buena solución a este problema.
El uso de CSS3 propiedad box-dimensionamiento
CSS3 box-sizing atributo contiene el relleno (padding) y la frontera (frontera) en anchura y altura de un elemento.
Si se establece en el elemento box-sizing: border-box; el relleno (padding) y la frontera (frontera) también se incluye en la anchura y la altura de:
Aquí están dos se añade elemento <div> box-sizing: border-box; las propiedades de un ejemplo sencillo.
Ejemplos
Anchura: 300px;
altura: 100px;
frontera: 1px sólido de color azul;
cuadro de dimensionamiento: Frontera de la caja;
}
.div2 {
Anchura: 300px;
altura: 100px;
padding: 50px;
frontera: 1px solid rojo;
cuadro de dimensionamiento: Frontera de la caja;
}
Trate »
A juzgar por los resultados del box-sizing: border-box; mejores resultados, es también una gran cantidad de desarrolladores necesitan.
El siguiente código puede hacer que todos los elementos de una forma más intuitiva para visualizar el tamaño. Muchos navegadores ya soportan box-sizing: border-box; (pero no todos - por lo que los elementos de entrada y el texto conjunto de anchura: 100%; la anchura del puesto no es lo mismo).
Todos los elementos que utilizan en forma de caja de tamaño más se recomienda: