Serie de preguntas de entrevistas iniciales: CSS y diseño de página
CSS3 Flexible Box (Flexible Box o flexbox) es un método de diseño que garantiza que los elementos tengan un comportamiento adecuado cuando la página necesita adaptarse a diferentes tamaños de pantalla y tipos de dispositivos. El propósito de presentar el modelo de diseño flexbox es proporcionar una forma más eficiente de organizar, alinear y asignar espacio vacío a subelementos en un contenedor. Muchas necesidades de diseño complejas y comunes se pueden satisfacer de forma sencilla. Su ventaja es que los desarrolladores sólo declaran el comportamiento que debe tener el diseño, sin dar métodos de implementación específicos. El navegador es responsable de realizar el diseño real. Este modelo de diseño es compatible con los principales navegadores.
Los elementos que adoptan un diseño flexible se convierten en contenedores flexibles. Todos sus elementos secundarios se convierten automáticamente en miembros contenedores, llamados elementos flexibles. Las propiedades comúnmente utilizadas establecidas en el contenedor son:
Propiedades establecidas en el proyecto:
(Contexto de formato de bloque) contexto de formato a nivel de bloque. BFC es un contenedor independiente aislado en la página. Los elementos secundarios dentro del contenedor no afectarán a los elementos externos, y viceversa, y en un BFC, el cuadro de bloque y el cuadro de línea (el cuadro de línea consta de todos los elementos en línea en una fila). estar dispuesto verticalmente a lo largo del borde de su elemento padre.
Todos los métodos anteriores pueden crear BFC, pero traerán algunos efectos negativos:
::before es el método de escritura de css3, :before es el método de escritura de css2, usado establecer el objeto antes del Contenido
:before es más compatible que ::before
Una declaración más precisa
1. La transición es una transición, un proceso de cambiar los valores de estilo, solo el inicio y el final; la animación en realidad también se llama fotograma clave, y se puede establecer un estado del fotograma intermedio combinándolo con el fotograma clave
2. La animación con @keyframe puede activarse; este proceso no requiere tiempo de activación, mientras que la transición requiere que se active mediante eventos de desplazamiento o js
3. La animación puede establecer muchos atributos, como el número de bucles, el estado del final de la animación, etc. la transición solo se puede activar una vez;
4, la animación se puede combinar con fotogramas clave para configurar cada fotograma, pero la transición solo tiene dos fotogramas
Método convencional
Cuando no es necesario utilizar el atributo de transformación
kernel webkit
Enlace de referencia:
CSS implementa sin ajuste de línea/ajuste de línea automático/visualización oculta de puntos suspensivos cuando el texto excede el límite
El atributo CSS de ajuste de objeto especifica cómo se debe adaptar el contenido del elemento reemplazable a él. Utilice la altura y el ancho determinados por el cuadro. Esta propiedad CSS puede lograr la mejor y más perfecta función de recortar imágenes automáticamente en el centro.
La regla @import debe preceder a cualquier otra regla CSS excepto @charset.
No se recomienda utilizar @import:
Debido a problemas de compatibilidad del navegador, los valores predeterminados de algunas etiquetas en diferentes navegadores son diferentes si no hay CSS. Al inicializar, a menudo habrá errores entre los navegadores. Las páginas muestran diferencias.
Resumen de la diferencia entre pseudoelementos y pseudoclases
La herencia CSS significa que las etiquetas envueltas en su interior tendrán el estilo de etiquetas externas, es decir, los elementos secundarios pueden heredar los atributos. de elementos padres.
Enlaces relacionados:
Herencia CSS, qué atributos se pueden heredar y cuáles no
El índice z puede cambiar el orden de apilamiento de los elementos. index superpondrá elementos con un índice z más pequeño. Cuando los valores del índice z son iguales, se sigue el orden del flujo de documentos y los últimos sobrescriben los anteriores.
px es la abreviatura de pixel, que significa píxel. px es el punto más pequeño de una imagen y un mapa de bits se compone de miles de puntos. Por ejemplo, los píxeles de la computadora que a menudo se escuchan son 1024x768, lo que significa 1024 píxeles en la dirección horizontal y 1024 píxeles en la dirección vertical. píxeles. Tenga en cuenta que 1 px en CSS no es necesariamente un bloque de píxeles físicos. Debe calcularse en función del DPR para determinar a cuántos bloques de píxeles físicos corresponde.
Proporción de píxeles del dispositivo: dpr = píxel físico/. píxel lógico (px), por ejemplo, el dpr del iPhone6 es 2 y los píxeles físicos son 750 (eje x), por lo que sus píxeles lógicos son 375
La referencia es el tamaño de fuente de el elemento padre, que tiene las características de herencia. Si usted mismo define el tamaño de fuente, se calculará por sí solo (la fuente predeterminada del navegador es 16 px) y 1 em no es un valor fijo en toda la página.
La nueva unidad css3, relativa al tamaño de fuente del elemento raíz html (página web), no dependerá del tamaño de fuente del elemento principal como em, lo que genera confusión.
Nueva unidad CSS3, la abreviatura de ancho del punto de vista, ancho de ventana, 1vw es igual al 1% del ancho de la ventana. Por ejemplo: ancho del navegador 1200 px, 1 vw = 1200 px/100 = 12 px.
1 pulgada (pulgada) = 2,54 centímetros (cm)
La longitud de la línea diagonal del teléfono móvil convertida en pulgadas
Píxeles horizontales y verticales de la pantalla
p>
1px representa un píxel físico/bloque de píxeles
PPI es la abreviatura en inglés de píxeles que se pueden mostrar por pulgada. Si la resolución anterior es un concepto de masa total, entonces ppi es el concepto de densidad. Podemos calcular el PPI de la pantalla dividiendo el número total de píxeles de la pantalla por el tamaño de la pantalla. La fórmula es la siguiente: a: Número de píxeles horizontales, b: Número de píxeles verticales, c: Tamaño de la pantalla (pulgadas).
¿Cuánto es 1px? Los centímetros no se pueden equiparar directamente, depende de la resolución.
La resolución de píxeles de una computadora general es 72ppi y la fórmula de cálculo es: (((1**2 + 1**2)**0.5)/72)*2.54, en este momento 1px =0.0498cm, 1cm =25px;
Muchos teléfonos móviles tienen 300ppi y la fórmula de cálculo es: (((1**2 + 1**2)**0.5)/300)*2.54, en este momento 1px=0.0119cm.
Enlace de referencia:
Dibuje una línea de 0,5 px
En términos de herencia:
Inicialmente dirigido a navegadores de versiones inferiores Cree una página para cumplir con las funciones más básicas, y luego implementar efectos e interacciones para navegadores avanzados, y agregar varias funciones para lograr una mejor experiencia de usuario. En otras palabras, es implementar las funciones más básicas de acuerdo con los requisitos mínimos y ser compatible hacia arriba. Tomando CSS como ejemplo, el siguiente método de escritura es una mejora progresiva.
Empiece por crear una página para una versión superior del navegador y mejore todas las funciones primero. Luego pruebe y corrija diferentes navegadores para asegurarse de que los navegadores de bajo nivel también tengan funciones básicas. Los navegadores de bajo nivel se consideran "pobres, pero aceptables" y puede realizar algunos pequeños ajustes para adaptarse a un navegador específico. Pero como no son el foco de nuestra atención, se ignorarán otras diferencias excepto la corrección de errores más importantes. Es decir, se basa en altos requisitos y altas versiones y es compatible con versiones anteriores. Tomando CSS como ejemplo, la degradación elegante se escribe de la siguiente manera.
Mejora progresiva, largo tiempo de desarrollo, alto costo, degradación elegante, ahorro de costos, ciclo de desarrollo corto.