El modelo de caja define c贸mo los elementos se representan visualmente: incluye el contenido, padding, bordes y m谩rgenes. Por ejemplo:
div {
width: 200px; /*Ancho*/
padding: 10px; /*Relleno*/
border: 5px solid black; /*Borde*/
margin: 15px; /*Margen*/
}
Organiza elementos en bloques o l铆neas, y dise帽a columnas con propiedades como float, flex, o grid.
.col {
float: left;
width: 33.33%;
}
Controla la ubicaci贸n de los elementos:
馃敻Relative: Posici贸n relativa a su posici贸n original.
馃敻Absolute: Posici贸n respecto al contenedor con relative.
馃敻Fixed: Posici贸n fija en la ventana.
.box {
background-color: yellow;
position: absolute;
top: 50px;
left: 20px;
}
Cuestionario HTM y CCS
+ 50
Resuelve los cuestionarios para tratas de poner a prueba todos los conceptos aprendidos.
驴Cu谩l es la unidad relativa en CSS que representa el tama帽o de la fuente del elemento padre?
驴Qu茅 propiedad de CSS se utiliza para agregar espacio dentro de un borde?
驴Qu茅 valor de la propiedad position permite que un elemento est茅 fijo en la ventana del navegador?
驴Qu茅 propiedad CSS se usa para establecer la distancia entre l铆neas de texto?
驴Cu谩l es el prop贸sito del pseudoelemento ::before en CSS?
聽
Adapta el dise帽o a diferentes tama帽os de pantalla con media queries.
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
馃敻Flexbox: Centra y distribuye elementos en una dimensi贸n.
馃敻Grid: Organiza elementos en filas y columnas.
.container {
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
