CSS3 Tamaño de la caja (box-sizing)

Usar CSS3La función de ajuste del tamaño de la caja, puede especificar el ancho efectivo del elemento.

Usar el tamaño de la caja (box-Redefinir el ancho de la caja (sizing)

Por defecto, la caja del elemento es visible/La anchura o altura real que se muestra en la página web depende de élwidthoheight,paddingyborderEl valor de la propiedad. Por ejemplo, si tiene un ancho de100%<div>El elemento aplica algunos márgenes internos y bordes, lo que hace que aparezca la barra de desplazamiento horizontal, como se muestra en el siguiente ejemplo.

.caja　{
　　　　ancho:　100%;
　　　　rejilla:　20px;
　　　　borde:　5px sólido #f08080;
}

Este es un problema muy común que enfrentan los diseñadores web desde hace mucho tiempo. Sin embargo, CSS3introduce el atributo-ajusteDeTamaño cambia el modelo de cuadro predeterminado de CSS de la siguiente manera, es decir, cualquier elemento padding o borde especificado en el elemento se coloca y dibuja en el área de contenido para que el ancho y la altura de renderizado del elemento sean iguales a los atributos CSS width y height especificados.-El atributo

.caja　{
　　　　ancho:　100%;
　　　　rejilla:　20px;
　　　　borde:　5px sólido #f08080;
　　　　caja-ajusteDeTamaño:  borde-caja;
}

Si ve la salida de este ejemplo, se dará cuenta de que la barra de desplazamiento ha desaparecido.

Al usar el atributo-Ajuste de tamaño para crear diseño

a través de CSS box-el atributo ajusteDeTamaño, crear un diseño de múltiples columnas se vuelve muy simple. Ahora, no tiene que preocuparse por el tamaño final del cuadro del elemento, sin agregar bordes o rellenos.

El siguiente ejemplo creará un diseño de dos columnas, donde cada columna tiene un ancho igual y utilizaflotarAtributos colocados lado a lado.

.caja　{
　　　　ancho:　50%;
　　　　rejilla:　20px;
　　　　fondo:  #f2f2f2;
　　　　flotar:  izquierda;
　　　　caja-ajusteDeTamaño:  borde-caja;
}

Del mismo modo, puede usar esta técnica sencilla para crear diseños más complejos.

.caja　{
　　　　ancho:　30%;
　　　　rejilla:　20px;
　　　　margen-izquierda:　5%;
　　　　fondo:  #f2f2f2;
　　　　flotar:  izquierda;
　　　　caja-ajusteDeTamaño:  borde-caja;
}
.caja:first-hijo　{
　　　　margen-left: 0;
}