Serie de entrevistas frontales: CSS y diseño de página
Los elementos con diseño flexible se convierten en contenedores flexibles. Todos sus elementos secundarios se convierten automáticamente en miembros contenedores, que se denominan elementos flexibles. Las propiedades comúnmente utilizadas establecidas como propiedades de contenedor son:
Propiedades establecidas para el proyecto:
(Contexto de formato de bloque) Contexto de formato a nivel de bloque. BFC es un contenedor aislado e independiente en la página. Los elementos secundarios del contenedor no afectarán a los elementos externos y viceversa. Además, en BFC, los cuadros de bloque y los cuadros de línea (los cuadros de línea se componen de todos los elementos en línea en una fila) se alinearán verticalmente a lo largo de los límites de sus elementos principales.
Todos los métodos anteriores pueden crear BFC, pero traerán algunos efectos negativos:
::before es la forma de escribir css3 y:before es la forma de escribir css2. que se utiliza para establecer el objeto antes del contenido.
::before tiene mejor compatibilidad que::before.
Una declaración más precisa
1 y transición son transiciones, que son el proceso de cambiar los valores de estilo. Solo tienen un principio y un final. La animación también se llama fotogramas clave y puede ser. combinado con fotogramas clave para establecer el estado del fotograma intermedio.
2. La animación con @keyframe puede desencadenar este proceso sin tiempo de activación, y la transición debe activarse mediante un evento de desplazamiento o js.
3. , 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étodos convencionales
Cuando no, cuando necesita usar el atributo de transformación
Núcleo de Webkit
Enlace de referencia:
Implementación CSS de ajuste de línea/sin ajuste de línea /texto que excede los puntos suspensivos de visualización ocultos
La propiedad CSS de ajuste de objeto especifica cómo encaja el contenido de un elemento reemplazable en un cuadro de altura y ancho determinados. Esta propiedad CSS puede lograr la mejor y más perfecta función de recortar y centrar imágenes automáticamente.
Las reglas @import deben preceder a cualquier otra regla CSS excepto @charset.
@No se recomienda importar:
Debido a la compatibilidad del navegador, los valores predeterminados de algunas etiquetas en diferentes navegadores son diferentes. Sin la inicialización de CSS, a menudo existen diferencias en la visualización de páginas entre navegadores.
Descripción general de la diferencia entre pseudoelementos y pseudoclases
La herencia CSS significa que la etiqueta envuelta en el interior tendrá el estilo de la etiqueta exterior, es decir, los elementos secundarios pueden heredar los atributos del elemento padre.
Enlaces relacionados:
Herencia CSS, ¿qué propiedades se pueden heredar y cuáles no?
El índice Z puede cambiar el orden de apilamiento de los elementos. Un índice z más grande se superpondrá a un elemento de índice z más pequeño. Cuando los valores del índice z son los mismos, este último sobrescribe al primero en el orden del flujo de documentos.
Px es la abreviatura de pixel, que significa píxel. Un píxel es el punto más pequeño de una imagen y un mapa de bits se compone de miles de esos puntos. Por ejemplo, los píxeles de la computadora que escuchamos a menudo son 1024x768, lo que significa que hay 1024 píxeles en la dirección horizontal y 768 píxeles en la dirección vertical. Tenga en cuenta que 1 px en CSS no es necesariamente un bloque de píxeles físicos. La cantidad de bloques de píxeles físicos debe calcularse en función del DPR.
Relación de píxeles del dispositivo: dpr = píxeles físicos/píxeles lógicos (px). Por ejemplo, el dpr del iPhone6 es 2 y el píxel físico es 750 (eje x), entonces su píxel lógico es 375.
La referencia es el tamaño de fuente del elemento padre, que tiene propiedades heredadas. Si define y calcula el tamaño de fuente usted mismo (la fuente predeterminada del navegador es 16 px), 1 em en toda la página no es un valor fijo.
A diferencia del tamaño de fuente del elemento raíz html, la nueva unidad de css3 no dependerá del tamaño de fuente del elemento principal, lo que causará confusión como em.
La nueva unidad de css3, la abreviatura de ancho del punto de vista, ancho de ventana, 1vw es igual a 1 del ancho de la ventana. Por ejemplo, si el ancho del navegador es 1200 px, 1VW = 1200 px/100 = 12 px.
1 pulgada) = 2,54 centímetros.
Convierte la longitud diagonal de un teléfono móvil en pulgadas.
Píxeles en las direcciones horizontal y vertical de la pantalla
1 px representa un píxel físico/bloque de píxeles.
PPI es la abreviatura de píxeles por pulgada. Si la resolución anterior es el concepto de masa total, entonces ppi es el concepto de densidad. Podemos calcular el PPI de una 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 pantalla (pulgadas).
1px y 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. cm, 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:
Primera compilación para versiones inferiores de navegadores La página cumple con las funciones más básicas y luego proporciona efectos e interacciones para navegadores avanzados, agregando diversas funciones para lograr una mejor experiencia de usuario. En otras palabras, se basa en los requisitos mínimos y las funciones más básicas, y es compatible con versiones superiores. Tomando CSS como ejemplo, lo que se escribe a continuación es una mejora gradual.
Primero, cree una página de navegador avanzada 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 "malos, pero aceptables" y se pueden modificar ligeramente para adaptarlos a navegadores específicos. Pero debido a que no son nuestro enfoque, otras diferencias simplemente serán ignoradas, excepto para corregir errores importantes. Es decir, basado en alta demanda y alta versión, compatibilidad con versiones anteriores. Tomando CSS como ejemplo, la degradación elegante se escribe así.
Mejora progresiva, largo tiempo de desarrollo, alto costo, degradación elegante, ahorro de costos, ciclo de desarrollo corto.