preguntas de la entrevista del día 01

1. Cuénteme sobre su comprensión del modelo de caja.

El modelo de caja significa que en una página web, cada elemento se considera como un cuadro rectangular, que contiene contenido, relleno, borde y margen. El modelo de caja define el espacio ocupado y la relación entre los elementos en el diseño de la página.

Específicamente, el modelo de caja se puede dividir en dos estándares diferentes: modelo de caja estándar W3C y modelo de caja estándar IE. La diferencia entre ellos es cómo se calculan el ancho y el alto total del elemento.

1. Modelo de caja estándar W3C:
   en el modelo de caja estándar W3C, el ancho y el alto de un elemento solo incluyen la parte del contenido, excluyendo el relleno, los bordes y los márgenes. Es decir, el tamaño real del elemento está determinado únicamente por su contenido. La fórmula se expresa como:
   ancho = ancho del contenido (ancho del contenido)
   alto = alto del contenido (alto del contenido)

2. Modelo de cuadro estándar de IE:
   en el modelo de cuadro estándar de IE, el ancho y el alto de un elemento incluyen contenido, relleno y bordes, pero no incluyen márgenes. Es decir, el tamaño real del elemento está determinado por una combinación de contenido, relleno y bordes. La fórmula se expresa como:
   ancho = ancho del contenido (ancho del contenido) + relleno izquierdo y derecho (relleno-izquierdo + relleno-derecho) + ancho del borde izquierdo y derecho (ancho-borde-izquierdo + ancho-borde-derecho) alto = contenido altura (altura del contenido
   )) + relleno superior e inferior (relleno-superior + relleno-inferior) + ancho del borde superior e inferior (ancho-superior-borde + ancho-inferior-borde)

En CSS, puede ajustar la presentación del modelo de caja configurando las propiedades de relleno, borde y margen del elemento. Por ejemplo, utilice el atributo de relleno para establecer el relleno, el atributo de borde para establecer el estilo y el ancho del borde y el atributo de margen para establecer el margen exterior.

El modelo de caja es un modelo que se utiliza para describir el diseño y el tamaño de los elementos de una página web. Trata cada elemento de la página web como un cuadro rectangular, que incluye cuatro partes: área de contenido, relleno, borde y margen.

En concreto, el modelo de caja incluye los siguientes elementos:

1. Área de contenido (Contenido): el contenido real se muestra dentro del cuadro, como texto, imágenes, etc. Su tamaño está determinado por el contenido del elemento y se puede configurar mediante propiedades CSS como widthy .height

2. Relleno: ubicado entre el área de contenido y el borde, se utiliza para controlar el espacio entre el contenido y el borde. Se puede configurar mediante propiedades CSS como padding-top, y .padding-rightpadding-bottompadding-left

3. Borde: se ajusta fuera del relleno y se utiliza para definir los límites del cuadro. Se puede configurar mediante propiedades CSS como border-widthy border-style.border-color

4. Margen: Ubicado fuera del borde, se utiliza para controlar el espacio entre el cuadro y otros elementos. Se puede configurar mediante propiedades CSS como margin-top, y .margin-rightmargin-bottommargin-left

Juntas, estas partes determinan la posición del elemento en la página y el espacio que ocupa. Cuando configuramos el tamaño o el diseño de un elemento, en realidad estamos ajustando los valores de propiedad de estos modelos de caja.

De forma predeterminada, el tamaño del elemento está determinado por el tamaño del área de contenido. Sin embargo, podemos box-sizingcambiar cómo se calcula el modelo de caja del elemento configurando las propiedades. Los valores comunes son:

• content-box(Predeterminado): El ancho y el alto incluyen solo el área de contenido.
• padding-box: El ancho y el alto incluyen el área de contenido y el relleno.
• border-box: El ancho y el alto incluyen el área de contenido, el relleno y los bordes.

Al comprender el modelo de caja, podemos controlar y ajustar mejor el diseño y la apariencia de los elementos en las páginas web para crear una variedad de efectos de página diferentes.

2. ¿Qué son los selectores CSS? ¿prioridad? ¿Qué propiedades se pueden heredar?

Los selectores CSS se utilizan para seleccionar elementos en un documento HTML y aplicar estilos a estos elementos. A continuación se muestran algunos selectores de CSS comunes:

1. Selector de elementos: seleccione elementos a través de los nombres de etiquetas de elementos HTML, como p, divetc.

2. Selector de clase: selecciona elementos por su valor de atributo de clase, comenzando con ., por ejemplo .my-class.

3. Selector de ID: selecciona un elemento único por su valor de atributo de identificación, comenzando con #, por ejemplo #my-id.

4. Selector de atributos: selecciona elementos por sus valores de atributos, incluidos:

   • [attribute]: Selecciona elementos con atributos específicos.
   • [attribute=value]: seleccione elementos con atributos y valores de atributos especificados.
   • [attribute~=value]: seleccione elementos que tengan el atributo especificado y el valor del atributo contenga el valor especificado.

5. Selector de descendientes: selecciona elementos descendientes del elemento especificado, separados por espacios, por ejemplo div p.

6. Selector de elementos secundarios directos (Selector secundario): Selecciona los elementos secundarios directos del elemento especificado, >separados por símbolos, por ejemplo div > p.

7. Selector de pseudoclase: selecciona elementos en un estado o posición específica, comenzando con dos puntos :, como :hover, :first-childetc.

8. Selector de pseudoelementos: selecciona subelementos virtuales de un elemento, comenzando con dos ::puntos dobles, como ::before, ::afteretc.

Las reglas de prioridad para los selectores de CSS son las siguientes (de mayor a menor):

1. !importante: Los estilos con esta bandera tienen la máxima prioridad.
2. Estilos en línea: styleestilos escritos directamente en elementos HTML a través de atributos.
3. Selector de ID: Estilo con selector de ID.
4. Selector de clases, Selector de atributos, Selector de pseudoclases: Estilos con selectores de clases, selectores de atributos o selectores de pseudoclases.
5. Selector de elementos y Selector de pseudoelementos: Estilos con selectores de elementos o selectores de pseudoelementos.
6. Estilos heredados: estilos heredados de elementos principales.

En general, la mayoría de las propiedades CSS son heredables, es decir, los elementos secundarios heredarán los estilos del elemento principal. Las propiedades heredables comunes incluyen, entre otras:

• font-family
• font-size
• color
• line-height
• text-align
• visibility
• cursor

Sin embargo, no todas las propiedades se pueden heredar, como por ejemplo:

• width
• height
• margin
• padding
• border

Cabe señalar que la herencia depende de la definición específica de cada propiedad y de la implementación del navegador. En algunos casos, incluso si una propiedad se puede heredar, es posible anular el estilo heredado aplicando un estilo explícito al elemento secundario.

3. ¿Cuáles son los métodos para centrar elementos horizontal y verticalmente? ¿Qué pasa si el elemento tiene un ancho y alto variables?

Hay muchas formas de centrar elementos horizontal y verticalmente. A continuación se muestran algunos métodos utilizados habitualmente:

1. Utilice el diseño CSS Flexbox:
   establezca el contenedor principal en diseño Flex y utilícelo justify-content: center; align-items: center;para centrar los elementos secundarios horizontal y verticalmente.

.parent-container {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
}

2. Usar diseño de cuadrícula CSS:
   establezca el contenedor principal en Diseño de cuadrícula y utilícelo place-items: center;para centrar los elementos secundarios en la cuadrícula.

.parent-container {
    
    
  display: grid;
  place-items: center;
}

3. Utilice posicionamiento absoluto y márgenes negativos:
   establezca el elemento secundario en posicionamiento absoluto, top: 50%; left: 50%;colóquelo en el centro del contenedor principal y luego corrija el ancho y alto del elemento dándole márgenes negativos.

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Utilice el atributo de transformación y la función de traducción: establezca los atributos
   del elemento secundario en y céntrelo horizontal y verticalmente junto con el posicionamiento absoluto.transformtranslate(-50%, -50%)

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Si el ancho y el alto del elemento son inciertos, puede utilizar el posicionamiento relativo y un desplazamiento negativo para centrarlo. left: 50%; top: 50%; transform: translate(-50%, -50%);Este método desplaza el elemento al centro del contenedor principal mediante el uso

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

De esta manera, no importa cuál sea el ancho y el alto del elemento secundario, se puede centrar horizontal y verticalmente en el contenedor principal.

4. ¿Cómo entender el reflujo y el redibujado? ¿En qué circunstancias se activará?

Redistribuir y repintar son dos conceptos clave cuando el navegador representa la página.

Reflujo significa que cuando cambia la estructura DOM o el estilo de un elemento, el navegador vuelve a calcular las propiedades geométricas del elemento (como posición, tamaño, etc.) y vuelve a diseñar la página. La operación de reflujo implica el proceso de cálculo de todo el diseño de la página, por lo que la sobrecarga de rendimiento es grande.

Redibujar significa que una vez completado el reflujo, el navegador vuelve a dibujar la parte afectada o toda el área visible de la página en función de la nueva información de diseño. Redibujar no implica cálculos de diseño, solo actualizar los colores de los píxeles, por lo que la sobrecarga de rendimiento es relativamente pequeña.

El navegador activa el reflujo y el repintado en las siguientes condiciones:

Situaciones que desencadenan el reflujo:

• Agregue, elimine y modifique nodos DOM.
• Modifique las propiedades de diseño de los nodos DOM (como posición, tamaño, estado oculto, etc.).
• La página se representa por primera vez.
• El tamaño de la ventana del navegador cambia.
• Obtenga algunas propiedades o llame a algunos métodos (como offsetWidth, offsetHeight, getComputedStyle, etc.).

Situaciones que desencadenan el rediseño:

• Cambie las propiedades de estilo del elemento, como color, color de fondo, fuente, etc., pero no cambie sus propiedades de diseño.
• Cambie los nombres de las clases o agregue o elimine hojas de estilo.

Dado que redistribuir es más caro que redibujar, redistribuir y redibujar con frecuencia provocará que el rendimiento de la página se degrade. Por lo tanto, para minimizar la activación del reflujo y el redibujado al escribir código, puede tomar las siguientes medidas:

• Utilice la propiedad de transformación de CSS para realizar transformaciones como desplazamiento y escala en lugar de modificar propiedades de diseño como arriba, izquierda, ancho y alto.
• Al modificar estilos DOM en lotes, utilice el método de agregar/eliminar nombres de clases para evitar modificar directamente el atributo de estilo.
• Utilice DocumentFragment para ejecutar por lotes varias operaciones DOM.
• Para las propiedades de diseño que requieren acceso frecuente, evite lecturas múltiples almacenando en caché los resultados.

Mediante una optimización razonable, se puede reducir la cantidad de redibujos y redibujos del navegador y se puede mejorar el rendimiento de la página y la experiencia del usuario.

5. ¿Qué es el diseño responsivo? ¿Cuáles son los principios básicos del diseño responsivo? ¿Cómo hacer?

Responsive Design es un método de diseño para crear páginas web y aplicaciones que se adaptan a diferentes tamaños de pantalla y dispositivos. El principio básico es permitir que la página ajuste dinámicamente el diseño, el tamaño de fuente, el tamaño de imagen, etc. de acuerdo con el dispositivo utilizado por el usuario para brindar la mejor experiencia de usuario.

Los principios básicos del diseño responsivo incluyen los siguientes:

1. Diseño de cuadrícula flexible: use unidades relativas (como porcentajes) para definir el ancho de los elementos, lo que le permite ajustar automáticamente el diseño según el tamaño de la pantalla.

2. Consultas de medios: a través de consultas de medios en CSS, se proporcionan reglas de estilo específicas para diferentes dispositivos en función de diferentes anchos de pantalla, alturas, tipos de dispositivos y otra información.

3. Imágenes y medios flexibles: utilice propiedades CSS (como ancho máximo) y etiquetas HTML (como <picture>o <video>) para garantizar que las imágenes y el contenido multimedia se adapten bien a diferentes dispositivos.

4. Texto y fuentes responsivos: use unidades relativas (por ejemplo em) y consultas de medios para ajustar los tamaños de fuente según el tamaño de la pantalla para facilitar la legibilidad y el uso.

5. Mejora progresiva: comience con la funcionalidad y el diseño básicos y agregue gradualmente funciones y optimizaciones más avanzadas para garantizar que se pueda acceder al contenido principal en diferentes dispositivos.

Para implementar un diseño responsivo, siga estos pasos:

1. Establezca objetivos: determine el público objetivo, el rango de dispositivos y la funcionalidad requerida de su diseño responsivo.

2. Planifique el diseño: utilice un sistema de cuadrícula flexible para definir el diseño de la página y el sistema de cuadrícula para que pueda adaptarse a diferentes tamaños de pantalla.

3. Utilice consultas de medios: según los diferentes tamaños de pantalla y características del dispositivo, escriba reglas de estilo CSS para diferentes situaciones y aplíquelas a la página mediante consultas de medios.

4. Trabajar con imágenes y medios: seleccione y trabaje con imágenes, utilizando consultas de medios y propiedades CSS adecuadas para garantizar que se muestren correctamente en diferentes dispositivos.

5. Manejo de texto y fuentes: elija fuentes y tamaños de fuente adecuados, y utilice unidades relativas y consultas de medios para ajustar el texto para que sea legible en diferentes dispositivos.

6. Pruebas y optimización: pruebe en diferentes dispositivos y navegadores, y optimice y mejore el diseño responsivo en función de los comentarios de los usuarios y el análisis de datos.

El diseño responsivo puede proporcionar una buena experiencia de usuario y adaptarse fácilmente a varios dispositivos y tamaños de pantalla, mejorando así la satisfacción del usuario y la accesibilidad del sitio web o la aplicación.

6. Si desea optimizar, ¿cuáles son las formas de mejorar el rendimiento de CSS?

Para mejorar el rendimiento de CSS, puede hacer lo siguiente:

1. Minimiza y comprime el código CSS: elimina espacios innecesarios, comentarios y código redundante, y utiliza herramientas de compresión para reducir el tamaño del archivo y el tiempo de transferencia de red.

2. Fusionar archivos CSS: combine varios archivos CSS en un solo archivo para reducir la cantidad de solicitudes HTTP y acelerar la carga de la página.

3. Utilice preprocesadores de CSS: como Sass o Less, y utilice sus variables, anidamiento, mezcla y otras funciones para mejorar la eficiencia de la escritura de CSS y la capacidad de mantenimiento del código.

4. Evite el uso de demasiados selectores: demasiados selectores anidados y jerárquicos aumentarán la complejidad de la coincidencia de selectores. Se recomienda simplificar la estructura del selector tanto como sea posible para evitar limitaciones excesivas.

5. Optimice el rendimiento del selector: usar selectores de ID y selectores de clase es mejor que los selectores de etiquetas y los selectores comodín porque coinciden más rápido.

6. Utilice tecnología de almacenamiento en caché: al establecer políticas de almacenamiento en caché adecuadas, el navegador puede almacenar en caché archivos CSS, reducir la carga repetida y mejorar la velocidad de respuesta de la página.

7. Evite el uso de propiedades CSS costosas: algunas propiedades como box-shadow, border-radiusetc. pueden afectar el rendimiento de la representación, así que úselas lo menos posible o evite modificaciones frecuentes.

8. Utilice animaciones y transiciones CSS: el uso de animaciones y transiciones CSS en lugar de efectos de animación implementados en JavaScript puede aprovechar mejor la aceleración del hardware y mejorar el rendimiento y la fluidez.

9. Utilice CSS Sprites: combine varios íconos pequeños o imágenes de fondo en una imagen grande y use background-positionatributos precisos para mostrar las partes requeridas, reduciendo la cantidad de solicitudes HTTP.

10. Evite el uso de @import: <link>es mejor usar etiquetas para introducir hojas de estilo externas que usar reglas @import, porque estas últimas harán que la página se cargue.

Al tomar estas medidas, puede optimizar eficazmente el rendimiento de CSS y mejorar la velocidad de carga de la página web y la experiencia del usuario.