Propiedad Box-sizing y el Modelo de cajas en CSS

 girlDev

El modelo de cajas o "box model" es posiblemente la característica más importante del lenguaje de hojas de estilos CSS, y la propiedad box-sizing nos ayuda a simplificar y entender mucho mejor los conceptos que están detrás del box-model.

Propiedad Box-sizing y el Modelo de cajas en CSS
1. box-sizing nos permite establecer la forma en que se calculará el ancho y alto total de un elemento.
2. ¿Cuál es el valor por defecto de la propiedad box-sizing?
3. En la imagen se muestra dos elementos div, los cuales comparten las siguientes propiedades CSS:
div {
width: 320px;
height: 160px;
border: 6px dashed chocolate;
padding: 10px;
margin: 20px;
}
¿Cuál de los divs utiliza la propiedad box-sizing:border-box; ?
825-divs-css.jpg
4. ¿Cuál es el tamaño del “Contenido” (área en blanco)?. El div tiene las siguientes propiedades CSS:
width: 300px;
height: 200px;
box-sizing:border-box; 
826-box-model-boxsizing-pregunta4.jpg
5. ¿Cuál es el tamaño del “Contenido” (área en blanco)?. El div tiene las siguientes propiedades CSS:
width: 400px;
height: 300px;
box-sizing: content-box;
827-box-model-boxsizing-pregunta5.jpg

© 2020 Expertics.