¡Descubre todo sobre el tamaño de cuadro en CSS3! En este artículo te brindaremos una descripción general completa para que puedas entender mejor cómo funciona y cómo puedes utilizarlo para mejorar tus diseños web. ¡No te lo pierdas en TIEngranaje!
CSS3 introduce una propiedad muy útil llamada box-sizing. El box-sizing La propiedad se utiliza para modificar el modelo de cuadro CSS predeterminado. El modelo de caja se utiliza para calcular los anchos y altos de los elementos.
para navegadores que se adhieren al modelo de caja CSS, el width y height de un elemento se calculan sumando el ancho/alto + relleno + borde.
Así por ejemplo, si un elemento tiene su width propiedad establecida en 500pxizquierda y derecha padding de 10px e izquierda y derecha border de 15pxentonces el ancho renderizado real de este elemento es 500 + 10 + 10 + 15 + 15 = 550px.
Compatibilidad con navegador
El box-sizing la propiedad es soportado en Chrome, Internet Explorer y Opera. Firefox admite la alternativa propiedad de prefijo de proveedor, la -moz-box-sizing propiedad, y Safari admite la -webkit-box-sizing propiedad.
Sintaxis
El box-sizing propiedad le permite modificar la anchura y la altura calculadas de un elemento.
box-sizing: content-box|border-box|padding-box*|inherit;| Valor | Descripción |
|---|---|
content-box |
Este es el comportamiento especificado por CSS2.1. El ancho y el alto especificados se aplican al cuadro de contenido del elemento. El relleno y el borde del elemento están fuera del ancho y alto especificados del elemento. |
border-box |
El ancho y la altura especificados del elemento se determinan en el border-box elemento. El relleno o borde especificado en el elemento está dentro del ancho y alto especificados del elemento. |
padding-box |
Experimental. Las propiedades de ancho y alto incluyen el tamaño del relleno y no incluyen el borde ni el margen. Compatible con Firefox. |
inherit |
Especifica que el valor de la box-sizing La propiedad debe ser heredada del elemento padre. |
Uso
El box-sizing La propiedad se puede utilizar en diversas situaciones. Por ejemplo, si necesita colocar dos cuadros que incluyen bordes, uno al lado del otro, puede lograrlo fácilmente configurando el box-sizing valor de la propiedad a border-box.
Esto forzará al navegador a renderizar el cuadro con el especificado ancho y alto, y coloque el borde y el relleno dentro de la caja.
Entonces, en el siguiente ejemplo, si su navegador es compatible con box-sizing propiedad, los dos div los elementos aparecerán uno al lado del otro en lugar de uno div encima del otro.
Ejemplo
En este ejemplo, los dos div elementos aparecerán uno al lado del otro ya que sus anchos de relleno y borde son calculado dentro de border-box de los elementos
<!DOCTYPE html>
<html>
<head>
<style>
#divContainer {
width:500px;
border:5px solid #7f7f7f;
}
.divBox {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:50%;
border:5px solid #ffaa00;
padding:20px;
float:left;
}
</style>
</head>
<body>
<div id="divContainer">
<div class="divBox">Div is positioned on the left.</div>
<div class="divBox">Div is positioned on the right.</div>
<div style="clear:both;"></div>
</div>
</body>
</html>Resultados
Si su navegador apoya el box-sizing propiedad, verá los dos divs uno al lado del otro. Si nosu navegador simplemente usará el content-box valor.
Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
