CSS Preguntas de la entrevista Estereotipo Resumen del ensayo

Directorio de artículos

1. selector css

Fuente: Estilos en línea > Estilos internos > Estilos externos > Personalización del navegador > Estilos personalizados
Tipo: selector de id (1000) > selector de clase > selector de pseudoclase (: pasar el mouse, etc., selector de atributo > selector de etiqueta, pseudoelemento (1) > selector comodín, selector secundario, selector adyacente Suplemento
:
! importante tiene la más alta prioridad
La prioridad es la misma, la última tendrá efecto
La herencia tiene baja prioridad

2. El modelo de caja de css

Modelo de cuadro estándar (W3C)
tamaño de cuadro: cuadro de contenido (valor predeterminado)
ancho/alto total del modelo de cuadro estándar: margen+borde+relleno+ancho/alto del área de contenido (es decir, el ancho/alto no incluye los valores de relleno y borde ))
Modelo de cuadro extraño (modelo de cuadro IE)
tamaño de cuadro: cuadro de borde Ancho
/alto total del cuadro IE == (ancho/alto del área de contenido + relleno + borde) + margen. (es decir, ancho/alto contiene valores de relleno y borde))

3. propiedades de heredabilidad css

Familia de fuentes: familia de fuentes, peso de fuente, tamaño de fuente, estilo de fuente
Serie de texto: alineación de texto, altura de línea, color
Elemento visible: visibilidad
Atributo de diseño de lista: estilo de lista

4. Método de diseño

Diseño estático:
Diseño adaptativo:
Diseño fluido:
Diseño receptivo:
Diseño elástico:

5. ¿Cuál es el atributo de posición del atributo css?

El flujo de documentos se refiere al proceso de composición tipográfica y diseño de elementos, los elementos se organizarán automáticamente de izquierda a derecha y de arriba a abajo, y finalmente el formulario se dividirá en filas de arriba a abajo, y en cada fila según el orden de izquierda a derecha Organiza los elementos en el orden correcto. [Salir del flujo del documento significa que los elementos interrumpen el arreglo], o lo quitan de la composición tipográfica.

Hay tres mecanismos de posicionamiento para css: flujo de documentos, flotación y posición.

A: posición: absoluto genera un elemento con posición absoluta, que se coloca en relación con el primer elemento principal que no sea el posicionamiento estático; debido al posicionamiento absoluto, se separa del flujo del documento.

B: position: fixed genera elementos absolutamente posicionados, posicionados en relación con la ventana del navegador, y no tiene nada que ver con el orden normal.

C: posición: relativa Genera un elemento relativamente posicionado, posicionado en relación a su posición normal. No hay forma de salir del flujo de documentos.

D: float: left Flota y no puede mantener la posición original.
posicionamiento de posición

estático: valor predeterminado, sin posicionamiento, el elemento aparece en el flujo normal (ignorando las declaraciones superior, inferior, izquierda, derecha o índice z)
absoluto: el elemento que genera el posicionamiento absoluto se coloca en relación con el primer elemento principal que no sea el posicionamiento estático, y el elemento se especifica mediante los atributos "izquierda", "arriba", "derecha" y "abajo"
flxed: genera elementos posicionados fijos, posicionados en relación con la ventana del navegador
Relativo: generar posicionamiento relativo, posicionamiento relativo a otras posiciones normales
pegajoso: posicionamiento pegajoso, el posicionamiento se basa en la posición del desplazamiento del usuario

6. La diferencia entre visualización: ninguna y visibilidad: oculta

Visibilidad de diferentes funciones: oculto---- oculta el elemento, pero aún ocupa la posición que debería ocupar en la página web. display: none----Establezca la visualización del elemento en none, es decir, no ocupa ninguna posición en la página web.
Define varias propiedades de visibilidad para especificar si un elemento es visible o no. display Este atributo se utiliza para definir el tipo de display box que genera el elemento cuando se establece el layout.

7. Unidades de medida CSS

rem es la unidad relativa al tamaño de fuente raíz, por ejemplo, puede establecer 1rem=50px
em es relativo al tamaño de fuente, como tamaño de fuente: 16px (predeterminado del navegador), luego 2em=32px
vm es el ancho del punto de vista, el ancho de la ventana, por ejemplo, el ancho de 1vm es el uno por ciento del ancho de la ventana
vh es la altura del punto de vista, la altura de la ventana, por ejemplo, la altura de 1vm es el uno por ciento de la altura de la ventana

8. Reflujo y Repintado

El navegador representa la página
● A través del analizador HTML, el HTML se analiza en un árbol DOM.
● A través del analizador CSS, analice el archivo CSS para formar el árbol CSSOM del modelo de hoja de estilo en cascada.
● Combinando el árbol DOM y el árbol CSSOM en un árbol de renderizado
● Diseño, el navegador dibuja cada nodo del árbol de renderizado en la pantalla, lo que se denomina diseño (Layout)
● Dibujo, dibujando cada nodo del árbol de renderizado en la pantalla, esto paso se llama dibujar (Paint)

Reordenamiento (reflujo) El reordenamiento es el comportamiento que después de que
el navegador muestra el diseño de la página por primera vez , provoca que la posición de cada nodo en la página se recalcule o se rediseñe .

Debido a que la posición o el tamaño del elemento ha cambiado, el navegador volverá a calcular el árbol de representación, lo que hará que cambie parte o la totalidad del árbol de representación, y los elementos afectados en la página deben volver a dibujarse
Los comportamientos que pueden desencadenar la reorganización incluyen: cambiar el tamaño de la página, operaciones relacionadas con el tamaño o la posición del elemento,
etc. cambio, el proceso de redibujar el elemento
● Redibujar no necesariamente activa la reorganización, pero la reorganización definitivamente desencadenará la reorganización
● Tales como: cambios en atributos como visibilidad, contorno y color de fondo
A menudo decimos HTML Es la estructura de la página web, CSS es la apariencia de la página web, y JS es la acción de la página web. Generalmente, lo que implica el cambio de HTML de la página web (es decir, el cambio del elemento DOM) es la reorganización, y lo que implica CSS, como cambiar el color, está reordenando. Dibujar (sin contar aquellos que afectarán el DOM, como usar display: flex)
para reducir y evitar
. Para evitar la reorganización y el redibujado, es necesario reducir o fusionar varias operaciones DOM en una sola operación DOM
. Porque el posicionamiento absoluto puede hacer que los elementos se separen del flujo del documento, solo comenzará una reorganización parcial sin afectar el mundo exterior
Al cambiar
la respuesta de la entrevista
de manera centralizada , cuando afecta el diseño de la página, como cambiar el tamaño y la posición , activará la reorganización. Al cambiar el color de fondo, etc., se está repintando.

9. Pantalla central de la caja CSS

1. Localiza al padre y al hijo

El margen 1.1 está configurado en automático

.child { parte superior: 0px; izquierda: 0px; inferior: 0px; derecha: 0px; margen: automático; }

1.2 transform hace que el cuadro secundario se mueva "hacia atrás" la mitad de su ancho y alto

.child { posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir (-50%, -50%);

2. Diseño flexible
Configure la caja principal como un contenedor de caja flexible
para centrar los elementos secundarios horizontal y verticalmente

.parent { pantalla: flex; justificar-contenido: centro; alinear elementos: centro; }

3. inline-block elemento de bloque
en línea alineación de texto: centro, solo útil para elementos en línea y elementos de bloque en línea

.parent { text-align: center; line-height: 500px; } .child { display: inline-block; vertical-align: middle; La propiedad vertical-align establece la alineación vertical de un elemento. medio coloca este elemento en el medio del elemento principal. }

El cuadro CSS es fijo a la derecha y adaptable a la izquierda
1. Cuadro fijo flotante + ancho de cuadro adaptable: 100%; // El ancho es igual a 100%

.left { float: left; width: 200px; height: 400px; background: red; } .right { width: 100%;//width is equal to 100% height: 400px; margin-left: 200px; background: blue; }

2. El contenedor principal del diseño flexible está configurado para mostrar: flex, la parte derecha está configurada para flex: 1

.caja{pantalla: flex;}

.left{ancho:200px;fondo: rojo;}

.right{ancho:%;flex:1;fondo: azul;}/ igual al ancho de la columna izquierda /

3. Posicionamiento absoluto en ambos lados

.left{ancho:200px;fondo: rojo; posición: absoluta;izquierda:;}

.right{ancho:100%;fondo: azul;posición: absoluta;izquierda:200px;}/ igual al ancho de la columna izquierda /

10. Elementos ocultos de estilo CSS

Posicionamiento al exterior de la pantalla, transformación de transparencia, visualización, opacidad,

El efecto del atributo de opacidad es agregar transparencia al color de fondo. El rango de valores es 0~1, pero también hará que las fuentes en el color de fondo sean transparentes juntas. Funciona bien cuando se usa solo.
visibilidad Establece la visibilidad para el elemento: hidden también puede ocultar este elemento, pero el elemento oculto aún debe ocupar el mismo espacio que cuando no está oculto, es decir, aunque el elemento es invisible, seguirá afectando el diseño de la página. .
display Si display: none está configurado para un elemento, el elemento y todos sus elementos descendientes se ocultarán, que es el método de ocultación más utilizado por los desarrolladores front-end. No se puede hacer clic en los elementos ocultos, no se puede acceder a ellos con dispositivos de asistencia, como lectores de pantalla, y el espacio ocupado desaparece

Suplemento:
La diferencia entre visibilidad y visualización

La visibilidad se hereda. Establezca la visibilidad: oculta en el elemento principal; los elementos secundarios también heredarán esta propiedad. Pero si configura la visibilidad: visible para el elemento secundario nuevamente, el elemento secundario se mostrará nuevamente. Esto es cualitativamente diferente de la pantalla: ninguno

visibilidad: oculto no afecta al conteo del contador, como se muestra en la figura, aunque visibilidad: oculto hace desaparecer un elemento, su contador sigue en marcha. Esto es completamente diferente de la pantalla: ninguno

La transición CSS3 admite el atributo de visibilidad, pero no admite la visualización. Dado que la transición se puede retrasar, se puede usar junto con la visibilidad para lograr efectos de visualización de demora de desplazamiento mediante CSS puro. Mejorar la experiencia del usuario.

11. Pantalla de estilo CSS

bloque" para mostrar el elemento como un elemento a nivel de bloque
none es diferente del valor oculto del atributo de visibilidad, no reserva su espacio físico para el objeto oculto, desaparecerá en la página web, pero el elemento no se elimina en el documento, solo se oculta en la página web estructura y no se muestra en la página web. No ocupa espacio físico y no se muestra en la página web, pero la estructura DOM sigue ahí
inline" se utiliza principalmente para convertir elementos a nivel de bloque en elementos en línea

12. Pseudo-clases en CSS

Pseudoclase de enlace: enlace visitado, pasar el mouse activo
Pseudoclase estructural: primer hijo último hijo n-ésimo hijo(n) n-ésimo-último-hijo(n)
N: par impar n 2n etc.
Pseudoclase objetivo: :objetivo { }

13. Animación CSS

Atributos comunes de la animación:
cuadro de animación animación
animation-name: nombre de la animación
animation-duration: duración
animation-timing-function: curva de velocidad de la animación
animation-delay: hora de inicio de la animación
animation-iteration-count: el número especificado de reproducción de la animación el valor predeterminado es 1
animación - dirección: especifica que la animación se reproducirá al revés en el próximo ciclo, el valor predeterminado es nominal