Maquetación Web

Para evitar que las imágenes se deformen cuando especifiquemos medidas que rompan su relación de aspecto (su anchura y altura no sean proporcionales). Utilizamos: (Selecciona 2 opciones)

• • display: block

• • width: 100%

• • object-fit: cover

• • object-position: center

Para crear un contenedor, se suele utilizar el nombre de clase .container, y se le añaden los siguientes estilos. (Selecciones 3)

• margin-inline: auto;

• display: flex;

• max-width: 1000px;

• padding: 1rem;

Se posiciona respecto al documento, por lo cual sigue al scroll.

• position: fixed;

• position: absolute;

• inset: 0;

• position: fixed;

  inset: 0 0 auto;

Defines la dirección de los elementos de izquierda a derecha.

• flex-direction: row-reverse;

• flex-direction: column;

• flex-direction: column-reverse;

• flex-direction: row;

Defines la dirección de los elementos de arriba a abajo.

• flex-direction: row-reverse;

• flex-direction: column;

• flex-direction: column-reverse;

• flex-direction: row;

Fuerza a los elementos a mantenerse en varias líneas.

• flex-wrap: wrap;

• flex-wrap: nowrap;

• flex-wrap

• flex-wrap: wrap-reverse;

En grid existen dos partes bien diferenciadas: un padre y sus hijos. El padre será el tablero o la etiqueta que envuelva todo. Llevará el estilo display: grid. Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero.

• El padre será el tablero o la etiqueta que envuelva todo. Llevará el estilo grid-template-columns: Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero. Llevará el estilo grid-template-rows:

• El padre será el tablero o la etiqueta que envuelva todo. Llevará el estilo display: grid. Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero.

• El padre será el tablero o la etiqueta que envuelva todo. Y los hijos son los contenedores o elementos que queremos posicionar dentro de nuestro tablero. Llevará el estilo display: grid.

• Las columnas serán el tablero o la etiqueta que envuelva todo. Y los hijos son las filas que son los contenedores o elementos que queremos posicionar dentro de nuestro tablero.

Se desea que el hijo amarillo, ocupe el área entre la columna 1 y la columna 2 y de la fila 1 a la fila 4. (Selecciona el código correcto y más eficiente)

• .amarillo { background-color: yellow; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; }

• .amarillo { background-color: yellow; grid-column: 1 / 2; grid-row: 1 / 4; }

• .amarillo { background-color: yellow; grid-column-start: 1; grid-row-start: 4; ; }

• .amarillo { background-color: yellow; grid-column-end: 1; grid-row-end: 4; }

Con cual de los siguientes estilos se puede agregar espacios entre las columnas y las filas de una grilla.

• grid-column-gap:

• grid-row-gap:

• grid-auto-flow:

• gap:

Seleccione las 2 opciones que dan la definición correcta de las media queries. (Selecciones 2)

• Las media queries permiten adaptar los estilos de una página con la etiqueta @media., una condición y {}.

• Las media queries permiten intercambiar estilos de una página a partir de unas condicionales, como: el ancho de la pantalla, la densidad de pixeles, la orientación del dispositivo, colores, etc.

• Las media queries posee su propia estructura. Por un lado se encierran los estilos en un @media, una condición y {}. A continuación, dentro de las llaves, se escriben los estilos que se aplicarán cuando se cumpla la condición.

• Las media queries posee su propia estructura. Por un lado se encierran los estilos en un @media, una condición y [ ] A continuación, dentro de las llaves, se escriben las condiciones.