Una mirada al tamaño de la caja CSS3
No hace mucho tiempo, cuando creamos un caja en una página web, digamos con una div, nosotros especificamos 100px tanto para el ancho como para la altura, seguido de relleno para 10px y las fronteras de alrededor de 10px también.
div ancho: 100px; altura: 100px; relleno: 10px; borde: 10px sólido #eaeaea;
Los navegadores expandirán el tamaño de la caja a 140px, donde esta cantidad de 140px del ancho / alto total se compone de la adición de la relleno y el fronteras como sigue; 100 px [ancho / alto] + (2 x 10 px [relleno]) + (2 x 10 px [borde]).
Sin embargo, a veces este resultado no es lo que esperamos que sea. A veces, necesitamos la caja para estar siempre 100px independientemente del relleno o los bordes añadidos.
Para superar este problema recurrente al crear un diseño de página web, podemos usar el CSS3 tamaño de caja propiedad para controlar cómo el Modelo de caja CSS Debería funcionar en los navegadores..
Utilizando el tamaño de la caja
los tamaño de caja La propiedad tiene dos opciones de valor, primero el caja de contenido; que es el valor predeterminado, al usar este valor, el modelo de caja se comportará como hemos descrito anteriormente.
Y el segundo es casillero, donde se calculará el tamaño de la caja al restar el tamaño del contenido especificado Con el relleno y los bordes añadidos..
div ancho: 100px; altura: 100px; relleno: 10px; borde: 10px sólido #eaeaea; tamaño de caja: caja de borde; -mano-caja de tamaño: cuadro de borde; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
Por ejemplo, cuando tenemos un cuadro como el que describimos anteriormente (100px cuadrado con 10 píxeles para el relleno y los bordes), el tamaño del contenido disminuirá a 60px, y el tamaño total de la caja permanece 100px, donde la ecuación de la resta se puede describir como sigue; 100 px [ancho / alto] - ((2 x 10 px [relleno]) + (2 x 10 px [borde])).
- Manifestación
- Descargar fuente
Soporte del navegador
los tamaño de caja la propiedad es soportado en todos los navegadores; Firefox 3.6+, Safari 3, Opera 8.5+ e Internet Explorer 8 y superior.
Entonces, si sabe que la mayoría de sus visitantes no usarán las versiones de Internet Explorer inferiores a 8, puede usar esta recomendación útil (gracias a Paul Irish).
* box-sizing: border-box; -mano-caja de tamaño: cuadro de borde; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /
El fragmento anterior se aplicará el tamaño de caja Propiedad a todos los elementos en su página web..
Ejemplo
En esta sección, le mostraremos un ejemplo de la vida real sobre cómo podemos hacer uso de esto. tamaño de caja propiedad. Crearemos una navegación simple, basada en el formato HTML a continuación, con cinco menús de enlace en él..
Luego, agregaremos algunos estilos decorativos; tales como, configurar la navegación fijar ancho para 500px y el ancho del enlace para 100px cada uno, luego, alinee el elemento de la lista y asigne diferentes fondos para cada menú de enlace, para que pueda ver la diferencia entre ellos.
nav ancho: 500px; margen: 50px auto 0; altura: 50px; nav ul padding: 0; margen: 0; nav li float: left; nav a display: inline-block; ancho: 100px; altura: 100%; color de fondo: #ccc; color: # 555; texto-decoración: ninguno; Familia tipográfica: Arial, sans-serif; tamaño de letra: 12 puntos; línea de altura: 300%; text-align: center; nav a display: inline-block; ancho: 100px; altura: 100%; color: # 555; texto-decoración: ninguno; Familia tipográfica: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; borde izquierdo: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-color: # D4D4D4; borde derecho: 0;
En este punto, nuestra navegación se ve normal..
Sin embargo, el problema vendrá cuando agreguemos los bordes izquierdo o derecho al menú de enlaces..
nav a border-left: 1px solid #aaa; borde derecho: 1px sólido # f3f3f3;
El menú se desbordará a la parte inferior, ya que el ancho del enlace ya no está 100px. Esto es ahora 102px, causando que el ancho total de la navegación sea 10px más de lo que hemos especificado anteriormente (500px).
Para superar este problema, necesitamos aplicar el tamaño de caja propiedad, de la siguiente manera:
nav a border-left: 1px solid #aaa; borde derecho: 1px sólido # f3f3f3; tamaño de caja: caja de borde; -mano-caja de tamaño: cuadro de borde; -webkit-box-dimensionamiento: cuadro de borde;
- Manifestación
- Descargar fuente
Otras lecturas
Y finalmente, si usted es del tipo aventurero y desea profundizar más en este tema, hemos reunido algunas referencias seleccionadas para usted:
- Entendiendo el modelo de caja CSS - Tech Republic
- Error de tamaño de caja en Firefox - BugZilla
- Tamaño de caja FTW - Paul Irish
