CSS: Modelo de caja
Al utilizar algunas propiedades como border y padding, se puede notar que esto afecta el tamaño final del bloque. Y es realmente así. Los navegadores calculan el tamaño final del bloque en la página de la siguiente manera:
Es decir, el tamaño final se forma no solo por las propiedades height y width, sino por muchas otras propiedades:
padding- relleno internoborder- bordesmargin- márgenes externos
Por lo tanto, para determinar el tamaño final del elemento, es necesario sumar los valores de todas estas propiedades. Por ejemplo, ¿cuál será el ancho de este bloque?
.box {
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
border: 1px solid #fff;
}
¿100px? ¿120px? ¿121px? ¿Cómo se puede saber este valor? Hay que sumar todos los valores que forman el bloque horizontalmente:
widthpadding-left/padding-rightborder-left/border-rightmargin-left/margin-right
Por lo tanto, el ancho final del elemento en la página es: 100px + 20px + 20px + 1px + 1px + 10px + 10px, que es igual a 162px.
Este comportamiento se llama modelo de caja. Describe la relación entre las propiedades y el tamaño final del elemento. Según este modelo, los navegadores "dibujan" el bloque, superponiendo las reglas unas sobre otras antes de mostrar el elemento en la página.
Vale la pena recordar este modelo, ya que al trabajar con CSS es importante comprender dónde y cómo el navegador "dibujará" el bloque y cómo esto afectará su altura y ancho.
Pero, ¿no esperas que al establecer las propiedades width y height obtengas precisamente esos valores? ¿Se puede cambiar el comportamiento del modelo de caja? ¡Sí! Para esto se utiliza la propiedad box-sizing, que puede tener los siguientes valores:
content-box- valor por defecto. Funciona como se describió en la lección.border-box- los valores del borde y los rellenos internos no aumentan el tamaño del elemento, sino que "consumen" espacio del contenido, es decir, las propiedades no afectarán la altura y el ancho. Si se establece un valor fijo, se mantendrá así, pero habrá menos espacio para el contenido dentro.
Tarea
Agrega un div con la clase card-hello en el editor y establece las siguientes reglas:
- color de fondo:
#fa7268 - color de texto:
#ffffff - ancho del bloque: 230 píxeles
- altura del bloque: 25 píxeles
- relleno interno: 20 píxeles
- márgenes externos: 10 píxeles
- borde de 2 píxeles de ancho, sólido. Color
#9c27b0 - tamaño de fuente: 20 píxeles
Escribe los estilos dentro de la etiqueta <style>
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.