Preguntas engañosas de CSS

|

Editado

👀
💙

Likes (0)

📣

Comentarios (0)

Hola gente, hoy le traigo algunas preguntas básicas pero difíciles en CSS que me parecieron interesantes. A ver cuantas puedes contestar sin ver las respuestas.

Preguntas

Pregunta 1 - ¿Por qué los elementos float hacen que su contenedor principal tenga una altura de 0px?

Pregunta 2 - ¿Por qué los elementos de bloque en línea tienen un espacio predeterminado entre ellos incluso si no hay margen?

Pregunta 3 - ¿Cómo funciona clearfix en CSS?

Pregunta 4 - ¿Cómo centrar el elemento en posicionamiento absoluto o relativo sin usar márgenes o padding o alineación de texto?

Pregunta 5 - ¿Podemos usar márgenes en las plantillas de correo electrónico html?

Pregunta 6 - ¿Podemos proporcionar manualmente el ancho y la altura para abarcar el elemento y, si no, cómo podemos hacerlo?

Pregunta 7 - ¿Cómo podemos cambiar el estilo de la barra de desplazamiento en CSS?

Pregunta 8 - Supongamos que tienes 12 párrafos, ¿cómo puedes apuntar y dar a cada cuarto elemento un color de texto rojo? 

Pregunta 9 - Supongamos que tenemos una forma de triángulo en un div, ¿cómo podemos proporcionar la sombra al triángulo? (Box shadow proporcionará la sombra al elemento div que será cuadrado pero no al triángulo)

Pregunta 10 - Supongamos que tenemos 5 elementos y proporcionamos una animación a todos esos 5 elementos, pero queremos tener un retraso de 0,3 s entre cada elemento, el primero se ejecutará después de 0,3 s, el segundo se ejecutará después de 0,6 s y así sucesivamente. ¿Cómo podemos dar ese retraso sin usar clases separadas para esos elementos y usar una sola clase para todos los elementos?

Respuestas

  1. Los elementos flotantes salen del flujo del contenedor principal y se vuelven visibles para el contenedor principal. Por lo tanto, el contenedor principal se comporta como vacío y su altura se convierte en 0px.
  2. Cuando configuramos los elementos como bloque en línea, hay espacios porque al crear la estructura html tenemos algunos espacios entre las etiquetas y también tenemos un nuevo espacio de línea como si creamos dos elementos en una línea diferente. Entonces, esos espacios se agregan cuando configuramos esos elementos como bloque en línea. Podemos resolver esto usando márgenes negativos.
  3. Clearfix hack corrige el problema de altura de 0px del contenedor principal de elementos flotantes. Se usa con ::before y ::after pseudo-selector y usando la propiedad clear, borra los flotadores en ambos lados.
  4. position:absolute; top:50%; left: 50%; transform:translate(-50%,-50%); ; (proporcionar también la altura al contenedor si no es mayor)
  5. No debemos usar márgenes en plantillas de correo electrónico html, ya que Outlook.com no admite márgenes, por lo que el diseño no será el mismo que se esperaba en Outlook.
  6. No podemos proporcionar manualmente el ancho y la altura para abarcar el elemento, pero podemos hacerlo convirtiéndolo en un elemento de bloque
  7. usando los selectores - ::-webkit-scrollbar, ::-webkit-scrollbar-track,::-webkit-scrollbar-thumb.
  8. p:nth-child(4n);
  9. Usando el filtro: drop-shadow()
  10. Podemos proporcionar el tiempo de retraso diferente a los 5 elementos usando el selector de nth-child o podemos usar variables al proporcionar un valor de variable diferente para cada elemento y luego calcular el valor de retraso por separado usando calc(--var(variable_value))

Dejame saber cuantas contestaste correctamente.

¡Tu negocio puede estar aqui!
Escribenos
¡Unikob te necesita!

Los costos para mantener Unikob en linea son cubiertos solo por unos cuantos individuos apasionados por la comunidad.

Donar 💖