Frontend - Box Model y Posicionamiento en Desarrollo Web

¿Qué elementos componen el Box Model en CSS?

• padding

• content

• position

• border

• margin

La propiedad (a)   en CSS agrega espacio alrededor del contenido de un elemento.

Cúal es el código CSS correcto para obtener el siguiente estilo de borde:

• div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: solid;
  border-left-style: dotted;
  }

• div {
  border-top-style: double;
  border-right-style: dashed;
  border-bottom-style: solid;
  border-left-style: dotted;
  }

• div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: solid;
  border-left-style: dotted;
  }

• div {
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: double;
  border-left-style: dotted;
  }

• div {
  border-top-style: dashed;
  border-right-style: double;
  border-bottom-style: dotted;
  border-left-style: solid;
  }

¿Cuál es la función de la propiedad margin en el Box Model?

• Definir el color de fondo del elemento

• Alinear el contenido dentro de un elemento

• Establecer el tamaño del elemento

• Establecer el espacio exterior alrededor de un elemento

¿En qué consiste el posicionamiento relative en CSS?

• El posicionamiento relative en CSS no tiene ninguna función específica

• El posicionamiento relative en CSS solo se puede aplicar a elementos de texto

• El posicionamiento relative en CSS permite posicionar un elemento de forma relativa al flujo normal del documento, pero sin afectar al posicionamiento de los demás elementos.

• El posicionamiento relative en CSS solo se puede utilizar en navegadores antiguos

¿Cuál es la característica principal del posicionamiento absolute?

• Se posiciona con respecto al centro de la página

• Se posiciona con respecto al elemento padre

• Se posiciona con respecto al último ancestro posicionado

• Se posiciona con respecto al primer ancestro posicionado o al body si no hay ancestros posicionados.

¿Qué significa el posicionamiento fixed en CSS?

• Significa que el elemento se posiciona de forma aleatoria en la página, haciendo la navegación en del usuario mucho mas divertida cada vez que ingrese.

• Significa que el elemento se posiciona en relación con el contenido de su contenedor padre

• Significa que el elemento se posiciona en relación con la ventana gráfica del navegador, por lo que permanece fijo incluso al hacer scroll en la página.

• Significa que el elemento se posiciona en relación con el cursor del usuario,
  por lo que permanece fijo pero se mueve al mover el cursor en la página.

• Significa que el elemento se posiciona en relación al comando ingresado en bash, por lo que puede moverse con las flechas del teclado.

¿Cuál es la diferencia entre padding y margin en CSS?

• El padding y el margin no tienen ninguna diferencia en CSS.

• El padding es el espacio externo de un elemento, mientras que el margin es el espacio interno de un elemento.

• El padding es el espacio interno de un elemento, mientras que el margin es el espacio externo de un elemento.

• El padding y el margin son sinónimos en CSS.

¿Por qué es importante entender el z-order al diseñar una página web?

• Para determinar el tamaño de la página web

• Para ajustar la velocidad de carga

• Para elegir los colores de fondo

• Para controlar el orden de superposición de los elementos en la página web.

Selecciona el CSS correcto que genera la imagen:

• .orange{

  background: orange;
  z-order: 15}
  .red{

  background: red;
  z-order: 20}
  .blue{

  background: blue;
  z-order: 10}

• .orange{

  background: orange;
  z-order: 35}
  .red{

  background: red;
  z-order: 25}
  .blue{

  background: blue;
  z-order: 15}

• .orange{

  background: orange;
  z-order: 35}
  .red{

  background: red;
  z-order: 15}
  .blue{

  background: blue;
  z-order: 25}

• .orange{

  background: orange;
  z-order: 35}
  .red{

  background: red;
  z-order: 20}
  .blue{

  background: blue;
  z-order: 10}

• .orange{

  background: orange;
  z-order: 15}
  .red{

  background: red;
  z-order: 20}
  .blue{

  background: blue;
  z-order: 25}