CSS3 es la última versión de la tecnología CSS, que proporciona muchas características y funciones nuevas para mejorar la apariencia y la interactividad de las páginas web. Aquí hay algunas características nuevas comunes en CSS3:

Diseño receptivo: con las consultas de medios CSS3, puede hacer que las páginas web se adapten a diferentes diseños en diferentes tamaños de pantalla.
Animación: CSS3 proporciona funciones de transición y animación, que pueden crear efectos de animación simples.
Color: CSS3 admite el uso de nuevos formatos de color como RGBa, HSLa y degradados.
Fuentes: CSS3 admite el uso de fuentes externas, como Google Fonts, para aumentar la diversidad de fuentes web.
Esquinas redondeadas y sombras: CSS3 proporciona funciones de radio de borde y sombra de cuadro, que pueden crear esquinas redondeadas y efectos de sombra.
Fondo: CSS3 admite múltiples imágenes de fondo y posicionamiento de fondo, lo que puede crear hermosos efectos de fondo.

Estas son solo algunas de las características de uso común en CSS3, tiene muchas otras características poderosas que vale la pena explorar y comprender.

2. ¿Cuáles son los selectores básicos en CSS? ¿Cómo se representan sus pesos?

CSS tiene los siguientes selectores básicos:

Selector comodín (*): Selecciona todos los elementos.
Selector de elementos (por ejemplo, h1): selecciona todos los elementos con un nombre de elemento específico.
Selector de ID (p. ej., #myId): selecciona un solo elemento con un atributo de ID específico.
Selectores de clase (por ejemplo, .myClass): seleccione uno o más elementos con un nombre de clase específico.
Selectores de atributos (por ejemplo, [type="text"]): seleccione elementos con atributos y valores de atributos específicos.
Selectores de pseudoclase (p. ej.: hover): seleccione elementos con un estado dinámico específico.
Selectores de pseudoelementos (por ejemplo, ::before): seleccionan parte de un elemento con contenido generado específico.

Los selectores de CSS se ponderan según su especificidad. El nivel de especificidad determina el peso del selector, que determina la aplicación del estilo final. El nivel de especificidad se puede expresar por el tipo, número y posición de los selectores.

3. Escriba la clasificación de prioridad de los selectores css

Los selectores de CSS se priorizan de la siguiente manera:

!importante
Estilos en línea (atributo de estilo)
selector de identificación
selector de clase, selector de atributo, selector de pseudoclase
Selectores de etiquetas, selectores de pseudoelementos
selector comodín
selector de herencia

Nota: Cuanto más atrás esté el selector, menor será su prioridad.

Cuando varios selectores seleccionan el mismo elemento al mismo tiempo, el estilo del selector con mayor prioridad anulará el estilo del selector con menor prioridad. Si varios selectores tienen la misma prioridad, el selector del archivo de estilo cargado en último lugar tiene prioridad sobre el selector del archivo de estilo cargado anteriormente.

4. Escribe varios códigos CSS para realizar el centrado vertical y horizontal de dos cajas de elementos

Usar diseño flexible:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.box {
  width: 50%;
  height: 50%;
}

Usar diseño de cuadrícula:

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

.box {
  width: 50%;
  height: 50%;
}

Utilice el diseño de la tabla:

.container {
  display: table;
  height: 300px;
  width: 100%;
}

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 50%;
}

Usar posicionamiento absoluto:

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

5. ¿Cuáles son las pseudoclases y los pseudoelementos comunes en CSS?

Pseudoclase:

:active: estado activo
:hover: estado del mouseover
:focus: El elemento obtiene el estado de foco
:visited: estado del enlace visitado
:first-child: el primer elemento hijo
:last-child: el último elemento hijo
:nth-child(n): el enésimo elemento hijo

Pseudoelemento:

::before: insertar contenido antes del contenido del elemento
::after: Insertar contenido después del contenido del elemento
::first-letter: seleccione la primera letra del texto
::first-line: seleccione la primera línea de texto
::selection: seleccione el color del texto

6. ¿Cuáles son los métodos de introducción de CSS? ¿Cuál es la diferencia entre tinta e @import?

Hay 3 formas de introducir CSS.

El estilo en línea se refiere a escribir el estilo en el atributo de estilo del elemento.
Incrustado se refiere a escribir el estilo dentro del elemento de estilo.
El estilo de enlace externo se refiere a introducir el estilo en el archivo CSS a través de la etiqueta de enlace.

Las diferencias entre la importación de estilos a través de la etiqueta de enlace y la importación de estilos a través del método @import son las siguientes.

(1) Restricciones en la carga de recursos.

link es una etiqueta XHTML Además de cargar archivos CSS, también puede cargar otras cosas como RSS, como cargar plantillas.

@import solo puede cargar archivos CSS.

(2) Método de carga.

Si usa un enlace para referirse a CSS, se cargará al mismo tiempo que se carga la página, es decir, se cargará sincrónicamente.

Si usa @import para referirse a CSS, debe esperar hasta que la página web esté completamente cargada antes de cargar el archivo CSS, es decir, carga asíncrona.

(3) Compatibilidad.

link es una etiqueta XHTML, por lo que no hay problema de compatibilidad.

@import se propuso en CSS2.1 y no es compatible con navegadores de versiones inferiores.

(4) Cambiar el estilo

La etiqueta de enlace es un elemento DOM, que admite el uso de JavaScript para controlar DOM y modificar estilos; @import es un método que no admite controlar DOM ni modificar estilos.

7. ¿Cómo entender el modelo de caja, cuántos tipos de modelos de caja hay?

Modelo de caja estándar W3C

En modo estándar, el ancho de un bloque = ancho+relleno (margen interior) + borde (borde) + margen (margen exterior)
Ancho en CSS = ancho del contenido
La altura (height) en CSS = la altura del contenido (contenido)

Modelo de caja IE

En modo raro, el ancho de un bloque = ancho+margen (margen) (es decir, en modo raro, el ancho incluye borde y relleno)
Ancho (ancho) en CSS = ancho del contenido (contenido) + (borde+relleno) * 2
La altura (height) en CSS = la altura del contenido (contenido) + (borde+relleno) * 2

Tamaño de caja CSS3

box-sizing:content-box; utilizará el estándar de modelo de cuadro de modo estándar
box-sizing:border-box; adoptará el estándar de tamaño de caja para el modo de peculiaridades
box-sizing:inherit; Especifica que el valor del atributo de tamaño de caja se debe heredar del elemento principal.

8. ¿Cuáles son los valores de visualización? explicar su papel?

block: Este elemento generará un cuadro rectangular con saltos de línea antes y después del elemento.
inline: El cuadro generado por este elemento está solo en la línea de base del texto y no hay saltos de línea antes o después del elemento.
inline-block: este elemento genera un cuadro en línea cuyo contenido se representa como un elemento de nivel de bloque sin saltos de línea antes o después del elemento.
none: el elemento no genera ningún cuadro y se elimina del flujo de documentos.
flex: el elemento se configura como un cuadro flexible para que sus elementos secundarios se distribuyan en un diseño flexible.
grid: el elemento se establece como un contenedor de cuadrícula, de modo que sus elementos secundarios se distribuyen en un diseño de cuadrícula.

9. ¿Por qué inicializar estilos CSS?

El propósito de inicializar los estilos CSS es establecer los estilos predeterminados de todos los navegadores en un estándar consistente, para controlar mejor el diseño y el estilo de la página. Los estilos predeterminados de varios navegadores son diferentes.Si no se realiza la inicialización, es probable que cause estilos de página inconsistentes. Al inicializar los estilos CSS, los desarrolladores pueden asegurarse de que todos los elementos tengan un estilo coherente y pueden definir estilos adicionales desde cero, lo que facilita la administración de los estilos de página.

10. ¿Qué sucede cuando las características de posición, visualización, desbordamiento y flotación se superponen entre sí?

Los efectos de posición, visualización, desbordamiento, flotación y otras características superpuestas entre sí se pueden dividir simplemente en las siguientes situaciones:

Interacción entre posición: relativa/absoluta/fija y visualización: ninguna/bloque: si la posición del elemento se establece en relativa/absoluta/fija, pero la visualización del elemento se establece en ninguna, entonces el elemento no se mostrará en la página; si la posición del elemento se establece en relativa/absoluta/fija, pero la visualización del elemento se establece en bloque, entonces el elemento se mostrará en la página y se separará del flujo del documento.
posición: la interacción entre relativo/absoluto/fijo y flotante: si la posición del elemento se establece en relativo/absoluto/fijo, pero el flotante del elemento se establece en izquierda/derecha, entonces el elemento se comprimirá hacia la izquierda /derecha de la página; si la posición del elemento se establece en relativa/absoluta/fija, y el elemento flotante se establece en ninguno, entonces el elemento no se comprimirá a la izquierda/derecha de la página.
La interacción entre el desbordamiento y la visualización: si el desbordamiento del elemento se establece en desplazamiento/automático, pero la visualización del elemento se establece en ninguno, entonces el elemento no se mostrará en la página; si se establece el desbordamiento del elemento a scroll/auto, y la visualización del elemento está configurada en bloque, entonces el elemento se mostrará en la página y aparecerá una barra de desplazamiento.

En general, la relación de superposición mutua de estas funciones depende de la implementación específica de cada función, por lo que en el uso real

11. ¿Por qué hay flotación?¿Cuándo necesitas limpiar la flotación? ¿Cuáles son las formas de limpiar flotadores?

La flotación ocurre porque la propiedad en CSS floatsaca el elemento del flujo del documento, lo que hace que flote.

Los flotadores deben borrarse cuando:

El diseño del elemento debajo del elemento flotante está desordenado
Un elemento flotante no ocupa su posición normal de flujo de documentos
La altura del elemento principal del elemento flotante no aumenta con el aumento del elemento flotante dentro de él

Las formas de borrar los flotadores son:

clear: bothAgregar atributo al elemento principal
Agregue un pseudo-elemento al elemento principal y agregue clear: bothun atributo
Utilice la propiedad de desbordamiento, por ejemplo, overflow: hiddenooverflow: auto
Use el pseudo-elemento after y configúrelo en un elemento de bloque vacío y configure su claro para ambos

12. ¿Se deben utilizar fuentes pares o impares en las páginas web? ¿por qué?

En el diseño web, es común usar fuentes pares, como 16px o 14px, en lugar de fuentes impares, como 15px o 17px. Debido a que la representación de fuentes con números pares en la computadora es más precisa, se pueden evitar algunos pequeños errores de desenfoque al mostrar, lo que mejora el efecto de fuente de la página web.

13. ¿Para qué escenarios son adecuados el margen y el relleno?

El margen y el relleno se utilizan para establecer los márgenes exterior e interior de los elementos.

margen: establezca el margen exterior del elemento, adecuado para establecer el espacio entre el elemento y otros elementos.
padding: establece el margen interior del elemento, adecuado para establecer el espacio entre el contenido interior del elemento y el borde.

Los escenarios de uso se determinan de acuerdo con las necesidades específicas. En general, si necesita reservar un cierto espacio para el contenido del elemento, puede usar padding; si necesita establecer el margen exterior para el elemento, puede usar margin.

14. ¿Cuál es la diferencia entre px, em y rem?

px: píxel es una unidad de tamaño fijo, generalmente utilizada para tamaño fijo (como borde, tamaño de imagen).
em: em es una unidad relativa, relativa al tamaño de fuente del elemento padre. Por lo general, se usa para tamaños de fuente, en relación con el tamaño de fuente predeterminado del navegador si no se establece el tamaño de fuente del elemento principal.
rem: rem también es una unidad relativa, pero relativa al tamaño de fuente del elemento raíz (elemento HTML). Si no se establece el tamaño de fuente del elemento raíz, es relativo al tamaño de fuente predeterminado del navegador. Por lo tanto, las unidades rem son generalmente más flexibles y manejables que las em.

15. ¿Qué tipos de núcleos de navegador existen y qué navegadores son?

El núcleo del navegador principalmente:

Parpadeo: el núcleo de Google Chrome y Opera.
Gecko: El núcleo de Firefox.
Webkit: El kernel para Safari y los dispositivos de Apple.
Trident: El núcleo de Internet Explorer.

Cabe señalar que muchos navegadores ahora tienen sus propios kernels únicos, en lugar de usar solo uno de los kernels anteriores. Por ejemplo, algunos navegadores de Android usan el kernel de Webkit, pero tienen sus propias características únicas y comportamientos especiales.

16. ¿Qué es el preprocesamiento css y cuáles son?

El preprocesamiento de CSS es una forma de extender CSS como un lenguaje con capacidades adicionales. Pueden hacer que el CSS sea más potente y manejable. Los lenguajes de preprocesamiento de CSS comunes son:

Sass (hojas de estilo sintácticamente asombrosas)
Menos (hojas de estilo más eficientes)
Aguja
PostCSS

Todos estos lenguajes de preprocesamiento tienen una sintaxis similar, pero cada uno tiene sus propias características. Deben compilarse en CSS estándar antes de que puedan ejecutarse en el navegador.

17. ¿Cuáles son los métodos de diseño de pantalla adaptable CSS?

Diseño de caja flexible
Diseño de cuadrícula
diseño de porcentaje
consulta de medios
disposición de la unidad rem
Diseño sensible a JavaScript.

18. ¿Optimizar el rendimiento de css?

Combinar archivos CSS: combine varios archivos CSS para reducir el número de solicitudes HTTP.
Minimice los archivos CSS: elimine los espacios en blanco, los comentarios y los saltos de línea en los archivos CSS para reducir el tamaño del archivo CSS.
Evite las expresiones CSS: las expresiones CSS pueden afectar negativamente el rendimiento de la página web.
Usar almacenamiento en caché: use la función de almacenamiento en caché HTTP para acelerar la carga.
Evite los hacks de CSS: Es posible que algunos navegadores no admitan los hacks de CSS, y también pueden resultar en un código difícil de mantener.
Reduzca el uso de selectores CSS: trate de usar selectores simples y evite los selectores demasiado complejos.
Use lean CSS: use solo las propiedades CSS necesarias y evite las excesivas.
Evite el uso de reglas @import: las reglas @import pueden hacer que el navegador envíe solicitudes HTTP adicionales, lo que puede afectar el rendimiento.

19. ¿Qué son los hacks de CSS?

CSS hack se refiere al método de usar un código especial para resolver el problema de compatibilidad de CSS en diferentes navegadores. Por lo general, se refieren al código específico del navegador que resuelve errores de representación del navegador o problemas de compatibilidad.

Los hacks de CSS vienen en diferentes formas, como el uso de prefijos de navegador específicos, declaraciones condicionales, etc. Sin embargo, a medida que la tecnología del navegador se desarrolla y se actualiza, es posible que ya no sean efectivos y que también tengan algunos efectos secundarios. Por lo tanto, generalmente se recomienda evitar el uso de hacks de CSS tanto como sea posible y usar otras soluciones de compatibilidad en su lugar.

20. ¿Entendimiento de BFC?

BFC, Contexto de formato de bloque, contexto de formato de nivel de bloque, es un bloque de representación del diseño de una página web. Es un área de representación independiente generada durante el proceso de diseño y se puede diseñar independientemente de otras áreas de representación. Las características de BFC incluyen: los elementos internos no afectarán a los elementos externos y los elementos externos no afectarán a los elementos internos; todos los elementos flotantes dentro de BFC se mencionarán en la parte superior de BFC. La aparición de BFC resuelve algunos problemas en el diseño de la página, como el impacto de los elementos flotantes en el diseño del documento, el diseño de varias columnas, etc. Los métodos de generación de BFC incluyen: el atributo flotante no es ninguno, el atributo de posición es absoluto o fijo, y el atributo de visualización es bloque en línea, celda de tabla, título de tabla, flex, cuadrícula.

Preguntas de entrevista básicas comunes de front-end css

1. ¿Cuáles son las nuevas características de CSS3?