CSS3 caja de medición
El CSS3 box-sizing la propiedad nos permite incluir el relleno y el borde en total anchura y la altura de un elemento.
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.1 -webkit- |
9.5 |
Sin el CSS3 box-sizing la propiedad
Por defecto, la anchura y la altura de un elemento se calcula así:
ancho + acolchado + border = anchura real de un elemento
altura de relleno + + border = altura real de un elemento
Esto quiere decir: Cuando se establece la anchura / altura de un elemento, el elemento menudo parezca más grande del que se estableció (debido a la frontera y el relleno del elemento se añaden a la del elemento especificado ancho / alto).
La siguiente ilustración muestra dos <div> elementos con la misma anchura y altura especificadas:
Los dos <div> elementos anteriores terminan con diferentes tamaños en el resultado (porque div2 ha especificado un acolchado):
Ejemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Inténtalo tú mismo " Así, durante mucho tiempo a los desarrolladores web han especificado un valor de anchura más pequeña de lo que querían, porque tenían que restar el relleno y los bordes.
Con CSS 3, el box-sizing la propiedad resuelve este problema.
Con el CSS3 box-sizing la propiedad
El CSS3 box-sizing la propiedad nos permite incluir el relleno y el borde en total anchura y la altura de un elemento.
Si se establece box-sizing: border-box; en un elemento de relleno y el borde están incluidos en la anchura y altura:
Aquí está el mismo ejemplo anterior, con la box-sizing: border-box; añade a ambos <div> elementos:
Ejemplo
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Inténtalo tú mismo " Puesto que el resultado de usar el box-sizing: border-box; es mucho mejor, muchos desarrolladores quieren que todos los elementos en sus páginas a trabajar de esta manera.
El código siguiente se asegura de que todos los elementos son de tamaño de este modo más intuitivo. Muchos navegadores ya usan box-sizing: border-box; para muchos elementos de la forma (pero no todos - por lo que las entradas y áreas de texto se ven diferentes a width: 100%;).
Aplicando esto a todos los elementos es seguro y racional: