Resumen de las preguntas de la entrevista clásica de CSS front-end

2.1 ¿Presentar el modelo de caja de CSS?

Hay dos tipos, modelo de cuadro IE, modelo de cuadro W3C;
modelo de cuadro: contenido (contenido), relleno (relleno), borde (margen), borde (borde);
diferencia: la parte de contenido de IE calcula el borde y el relleno;

2.2 ¿Prioridad del selector CSS?

!importante > estilo en línea (peso 1000) > selector de ID (peso 100) > selector de clase (peso 10) > etiqueta (peso 1) > comodín > herencia > atributo predeterminado del navegador

2.3 ¿De cuántas maneras se puede centrar verticalmente?

Texto de una sola línea: altura de línea = altura
Imagen: alineación vertical: medio;
posicionamiento absoluto: arriba: 50%; izquierda: 50%; transformar: traducir (-50%, -50%);
flex: display:flex;margin : automático

2.4 Explique brevemente la diferencia y el uso entre enlace CSS y @import.

link es una etiqueta XHTML, además de cargar CSS, también puede definir otras cosas como RSS; @import pertenece a la categoría de CSS y solo puede cargar CSS.
Cuando el enlace se refiere a CSS, se carga al mismo tiempo que se carga la página; @import debe cargarse después de que la página esté completamente cargada.
link es una etiqueta XHTML y no tiene problemas de compatibilidad; @import se propuso en CSS2.1 y los navegadores de versiones inferiores no lo admiten.
link admite el uso de Javascript para controlar DOM y cambiar estilos; @import no.

2.5 ¿Cuál es la diferencia entre los efectos de transparencia de rgba y la opacidad?

la opacidad heredará el atributo de opacidad del elemento padre, y el elemento descendiente del elemento establecido por RGBA no heredará el atributo de opacidad.

2.6 ¿Cuál es la diferencia entre visualización: ninguna y visibilidad: oculta?

display:none oculta el elemento correspondiente, no se le asigna ningún espacio en el diseño del documento y los elementos a cada lado se cerrarán, como si nunca hubieran existido.
visibilidad: oculto oculta el elemento correspondiente, pero conserva el espacio original en el diseño del documento.

2.7 El valor de posición, relativo y absoluto, ¿es relativo a quién están posicionados?

Relativo: posicionamiento relativo, relativo a su propia posición en el flujo normal de documentos.
absoluto: Genera posicionamiento absoluto, relativo al elemento padre cuyo posicionamiento no es estático en el nivel más cercano.
corregido: (la versión anterior de IE no es compatible) genera posicionamiento absoluto, relativo a la ventana del navegador o al marco para el posicionamiento.
estático: el valor predeterminado, sin posicionamiento, el elemento aparece en el flujo normal del documento.
pegajoso: genera elementos posicionados adhesivos, la posición del contenedor se calcula de acuerdo con el flujo normal de documentos.

2.8 ¿Dibujar una línea recta de 0,5 px?

La prueba es la transformación de css3.

height: 1px;
transform: scale(0.5);

2.9 ¿Cuáles son los significados y usos de calc, support y media?

• @support se utiliza principalmente para detectar si el navegador admite un determinado atributo de CSS. De hecho, es un juicio condicional. Si admite un determinado atributo, puede escribir un conjunto de estilos. Si no admite un determinado atributo, También puede proporcionar otro conjunto de estilos como sustituto.
• La función calc() se utiliza para calcular dinámicamente el valor de longitud. La función calc() admite operaciones "+", "-", "*", "/";
• @media query, puede definir diferentes estilos para diferentes tipos de medios.

2.10 ¿Qué representan 1rem, 1em, 1vh y 1px?

• rem
  rem son todas las longitudes relativas al elemento raíz. La práctica habitual es establecer un tamaño de fuente para los elementos html y luego la unidad de longitud de otros elementos es rem.
• El em del tamaño de fuente del subelemento em
  es relativo al tamaño de fuente del elemento principal.
  El ancho/alto/relleno/margen del elemento es relativo al tamaño de fuente del elemento si se usa em.
• Los nombres completos de vw/vh
  son Ancho de ventana gráfica y Alto de ventana gráfica. El ancho y alto de la ventana equivalen al 1% del ancho y alto de la pantalla. Sin embargo, la unidad % es más apropiada cuando se trata de ancho, y la unidad vh es mejor cuando se trata de altura.
• px
  px píxel (píxel). Unidad de longitud relativa. Los píxeles px son relativos a la resolución de pantalla del monitor.
  La resolución de una computadora general es {1920 1024} y otras resoluciones diferentes
  1920 1024. La primera tiene un ancho de pantalla de 1920 píxeles en total, mientras que la segunda tiene una altura de 1024 píxeles.

2.11 ¿Dibujar un triángulo?

Esta es una prueba de CSS simple. Mientras usa la biblioteca de componentes, no olvide el CSS nativo.

.a {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>

2.12 Hable sobre su comprensión de la modularidad CSS

desarrollo CSS

Cuando escribimos CSS, en realidad pasamos por las siguientes etapas:

• CSS nativo escrito a mano
• Usando el preprocesador Sass/Less
• Usando PostCSS postprocesador
• Usar módulos css
• usar css en js

CSS nativo escrito a mano

Cuando aprendimos por primera vez a escribir páginas, todos aprendieron a escribir CSS en las siguientes situaciones:

• Estilos en línea, es decir, escribir código CSS directamente en el atributo de estilo en html.
• Estilo incrustado, es decir, escribir clase en la etiqueta de estilo en html h y proporcionarla a la página actual.
• Importar estilos, es decir, utilizar el método @import en estilos en línea para importar otros estilos y proporcionarlos para su uso en la página actual.
• Estilo externo, es decir, use la etiqueta de enlace en html para cargar el estilo y proporcionarlo a la página actual.

Exploramos constantemente y gradualmente formamos el hábito de escribir estilos integrados y estilos externos .

Después de leer esto, todos deben tener dudas, ¿por qué no se recomienda utilizar estilos en línea?

Desventajas de usar estilos en línea

• Los estilos no se pueden reutilizar.
• El peso del estilo es demasiado alto y el estilo no está bien cubierto.
• La capa de presentación no está separada de la capa estructural.
• No se puede almacenar en caché, lo que afecta la eficiencia de la carga.

Entonces sigamos analizando, ¿por qué no se recomienda utilizar estilos de importación?

Después de la prueba, usar @import en CSS tendrá las dos situaciones siguientes:

1. En IE6-8, la hoja de estilo a la que apunta la declaración @import no se cargará al mismo tiempo que otros recursos de la página, sino que comenzará a descargarse después de que se hayan cargado todos los recursos de la página.

2. Si @importa otro CSS en la etiqueta del enlace, la página esperará hasta que se carguen todos los recursos antes de comenzar a analizar el @import css en la etiqueta del enlace.

Desventajas de usar estilos importados

• Los estilos de importación solo se pueden colocar en la primera línea de la etiqueta de estilo; otras líneas no serán válidas.
• La hoja de estilo declarada por @import no puede hacer un uso completo del comportamiento del navegador al solicitar recursos simultáneamente, y su comportamiento de carga a menudo se retrasa o suspende debido a la carga de otros recursos.
• Los estilos de página pueden parpadear debido a la carga diferida de hojas de estilo @import.

Usando el preprocesador Sass/Less

Con el desarrollo continuo del tiempo, gradualmente descubrimos que escribir CSS nativo en realidad no es amigable, por ejemplo: CSS nativo no admite variables, no admite anidamiento, no admite selectores principales, etc., estos diversos problemas han dado lugar a preprocesador como sass/less.

El preprocesador fortalece principalmente la sintaxis de CSS y compensa los problemas mencionados anteriormente, pero en esencia, el resultado empaquetado es el mismo que el CSS original, pero es amigable para los desarrolladores y más fluido de escribir.

PostprocesadorPostCSS

Con el desarrollo continuo de la ingeniería front-end, los líderes de front-end han desarrollado cada vez más herramientas. La visión es entregar todo el trabajo repetitivo a las máquinas, y postcss ha surgido en el campo css.

postcss se puede llamar babel en el mundo css. Su principio de implementación es analizar nuestro código css a través de ast y luego procesar los resultados del análisis, derivando así muchos escenarios de uso para procesar css.

Los escenarios de uso comunes de postcss son:

• Coopere con stylelint para verificar la sintaxis CSS
• Aumentar automáticamente el prefijo automático del prefijo del navegador
• Sintaxis para compilar css a continuación

La modularidad de CSS crece rápidamente

Con la popularización y el uso de marcos modulares como reaccionar y vue, tenemos cada vez menos oportunidades para escribir CSS nativo. A menudo dividimos la página en muchos componentes pequeños y luego ensamblamos los múltiples componentes pequeños en la página renderizada final como bloques de construcción.

Pero sabemos que CSS coincide con elementos basados ​​en nombres de clases. Si dos componentes usan el mismo nombre de clase, el último sobrescribirá el estilo del primero. Parece que resolver conflictos de nombres de estilos es un gran problema.

Para resolver este problema, nació el concepto de modularización CSS.

Definición modular de CSS

• ¿Tienes dificultades con los nombres de las clases?
• ¿Te preocupa usar el mismo nombre de clase que otra persona?
• ¿Le molesta la jerarquía poco clara?
• ¿Le molesta que el código sea difícil de reutilizar?
• ¿Te intimida el tamaño de common.css?

Si encuentra los problemas anteriores, es necesario utilizar la modularización CSS.

Implementación de modularidad CSS

Convención de nomenclatura BEM

BEM significa bloque (bloque), elemento (elemento), modificador (modificador). Es una metodología de nomenclatura front-end propuesta por el equipo de Yandex. Este inteligente método de nomenclatura hace que sus clases CSS sean más transparentes y significativas para otros desarrolladores.

La convención de nomenclatura de BEM es la siguiente:

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}

El método de nomenclatura de bem puede aclarar nuestra jerarquía de código CSS, y el problema de los conflictos de nomenclatura también se puede resolver mediante una nomenclatura estricta, pero no se puede evitar por completo. Después de todo, es solo una restricción de nomenclatura y aún se puede ejecutar si No está escrito según las especificaciones.

Módulos CSS

Módulos CSS significa que importamos nuestro código CSS como import js. Cada nombre de clase en el código es un atributo del objeto importado. De esta manera, el estilo CSS al que se hace referencia se puede especificar claramente al usarlo.

Y los módulos CSS convertirán automáticamente el nombre de la clase en un valor hash al empaquetar, eliminando por completo el problema de los conflictos de nombres de clases CSS.

El uso es el siguiente:

1. Defina el archivo css.

.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}

/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}

.otherClassName {
  composes: className from "./style.css";
}

2. Importe el archivo css en el módulo js.

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

3. Configure el empaquetado del cargador CSS.

Los módulos CSS no se pueden usar directamente, pero deben empaquetarse. Generalmente, la configuración de los módulos CSS se puede completar configurando el atributo de módulos en css-loader.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              // 自定义 hash 名称
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};

4. El nombre de la clase CSS empaquetada final se genera a partir de una larga cadena de valores hash.

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

CSS en JS

CSS en JS significa usar el lenguaje js para escribir css, no se necesitan archivos css separados en absoluto, todos los códigos css se colocan dentro del componente para realizar la modularización de css.

CSS en JS es en realidad una especie de idea de escritura. Actualmente, se han realizado más de 40 tipos de soluciones, y la más famosa son los componentes con estilo.

El uso es el siguiente:

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。

除此之外，还有其他比较出名的库：

• emotion
• radium
• glamorous

总结

最后放一张总结好的图。

2.13 说说对 CSS 预编语言的理解，以及它们之间的区别

一、是什么

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题

需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码

Css预处理器便是针对上述问题的解决方案

预处理语言

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

二、有哪些

Css预编译语言在前端里面有三大优秀的预编处理器，分别是：

• sass
• less
• stylus

sass

2007 年诞生，最早也是最成熟的 Css 预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 Css 框架，目前受 LESS 影响，已经进化到了全面兼容 Css 的 Scss

文件后缀名为.sass与scss，可以严格按照 sass 的缩进方式省去大括号和分号

less

2009年出现，受SASS的影响较大，但又使用 Css 的语法，让大部分开发者和设计师更容易上手，在 Ruby 社区之外支持者远超过 SASS

Su desventaja es que la función programable no es suficiente en SASS comparación , pero la ventaja es la simplicidad y la compatibilidad Css, lo que a su vez afecta SASS la evolución de Scssla época .

aguja

Stylus Es un Cssmarco de preprocesamiento, producido en 2010, de Node.js la comunidad, utilizado principalmente para el soporte de preprocesamiento de Nodeproyectos .Css

Así Styluses un nuevo tipo de lenguaje que permite crear lenguaje robusto, dinámico, expresivo Css. es más joven y esencialmente hace algo SASS/LESSsimilar a

Tres, la diferencia

Aunque varios preprocesadores son potentes, las funciones más utilizadas son las siguientes:

• variables
• alcance
• Mixins de código (mixins)
• anidado (reglas anidadas)
• Modularización de código (módulos)

Por lo tanto, las diferencias en estos aspectos se amplían a continuación.

uso básico

menos y scss

.box {
  display: block;
}

hablar con descaro a

.box
  display: block

aguja

.box
  display: block

anidando

La sintaxis de anidamiento de los tres es consistente, incluso la etiqueta & que hace referencia al selector principal es la misma

La única diferencia es que Sass y Stylus se pueden escribir sin llaves

menos

.a {
  &.b {
    color: red;
  }
}

variable

Sin duda, las variables agregan un método de reutilización efectivo a Css, reduciendo la repetición inevitable de la "codificación rígida" en Css.

lessLa variable declarada debe @comenzar con, seguida del nombre de la variable y el valor de la variable, y el nombre de la variable y el valor de la variable deben estar :separados por dos puntos.

@red: #c00;

strong {
  color: @red;
}

sassLa variable declarada es lessmuy similar al nombre de la variable, excepto que el nombre de la variable comienza $con

$red: #c00;

strong {
  color: $red;
}
stylus`声明的变量没有任何的限定，可以使用`$`开头，结尾的分号`;`可有可无，但变量与变量值之间需要使用`=

stylusNo recomendamos @declarar variables al principio del símbolo.

red = #c00

strong
  color: red

alcance

CssEl precompilador asigna alcance a las variables, es decir, hay una vida útil. Al js igual que, primero buscará variables del alcance local y luego buscará el alcance superior a su vez.

sassNo hay variables globales en

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

después de la compilación

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
} 

Por lo tanto, sasses mejor no definir el mismo nombre de variable en

lessstylusEl alcance de y es javascriptmuy similar: en primer lugar, buscará variables definidas localmente; si no las encuentra, buscará nivel por nivel como burbujeando hasta la raíz.

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

Después de la compilación:

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
} 

contaminación

Se debe decir que Mixin es una de las funciones más esenciales del preprocesador. En pocas palabras, Mixinsuna parte del estilo se puede extraer como un módulo definido por separado, que puede ser reutilizado por muchos selectores.

MixinsLas variables o parámetros predeterminados se pueden definir en

En less, el uso mixto se refiere a ClassAintroducir uno definido en otro ya definido Class, y también se puede usar para pasar parámetros, las variables de parámetros son @declaraciones

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

después de la compilación

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

SassmixinsDebe usarse al declarar @mixinn, seguido del mixinnombre, y también se pueden configurar parámetros. El nombre del parámetro está en $forma de declaración de variable.

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylusLa combinación Csses ligeramente diferente de la combinación de los dos lenguajes de preprocesador anteriores: puede declarar directamente el Mixinsnombre sin usar ningún símbolo y luego usar el signo igual (=) para conectar los parámetros definidos y los valores predeterminados.

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

modularización de código

La modularización es la Cssdivisión del código en módulos.

scss, lessy styluslos métodos de uso de los tres son los siguientes

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

2.14 ¿Cómo implementar un cuadrado con ancho y alto adaptables usando solo CSS?

Podemos ver más o menos los escenarios de aplicación de los cuadrados CSS en sitios web como el comercio electrónico y los blogs personales, y es necesario dominar los diseños de cuadrados adaptativos.

cuadrado

Es muy simple, simplemente establezca el ancho y alto del cuadro en 200px.

<div class="box">小明写的</div>

.box {
    width: 200px;
    height: 200px;
    background: pink;
}

cuadrado adaptativo

bronce

Cuando se trata de autoadaptación, debes pensar en unidades relativas como rem y vw , usemos estas unidades para lograrlo.

movimiento rápido del ojo

<div class="rem">rem</div>

body {
    font-size: 16px;
}

.rem {
    width: 10rem;
    height: 10rem;
    background: pink;
}

@media only screen and (max-width: 1200px) {
    body {
        font-size: 12px;
    }
}

Cuando el ancho de la pantalla es mayor que 1200 px, la fuente es 16 px y el tamaño del cuadro remoto es 160 px * 160 px;

Cuando el ancho de la pantalla es inferior a 1200 px, la fuente es 12 px y el tamaño del cuadro remoto es 120 px * 120 px;

El valor de rem se calculará dinámicamente cuando cambie el ancho de la pantalla en el escenario de la aplicación real, que solo se utiliza para comprender casos.

ventaja

En un proyecto adaptado a rem, puede usar rem directamente para establecer el ancho y el alto de la caja, es decir, un cuadrado adaptativo.

defecto

En un proyecto donde no se establece rem, es un poco excesivo lograr un cuadrado adaptativo solo

VW

<div class="vw">vw</div>

.vw {
    width: 10vw;
    height: 10vw;
    background: yellow;
}

Se puede observar que el cuadrado se adapta al cambio del ancho de la pantalla, que es el efecto que queremos

ventaja

vw es la unidad de ventana gráfica incorporada y se puede utilizar directamente.

defecto

En escenarios comerciales reales, es relativamente problemático convertir el tamaño del borrador del diseño a vw

oro

Usando porcentaje + relleno , aquí hay un punto de conocimiento muy detallado: cuando el valor de relleno y margen es un porcentaje, el valor del porcentaje se basa en el ancho del elemento principal .

<div class="padding"></div>

.padding {
    width: 20%;
    padding-top: 20%;
    /* padding-top或padding-bottom都可以 */
    background: #696969;
}

Establecemos el ancho de la caja en 20% y el eje vertical del relleno se usa para expandir la altura de la caja, obteniendo así un cuadrado adaptativo.

Los amigos cuidadosos encontrarán que ahora es un cuadrado adaptable, pero la altura está completamente ocupada y no hay lugar para colocar el contenido. Sí, actualmente es solo un cuadrado; en escenarios comerciales reales, el interior son imágenes u otro contenido, y se necesita más que un cuadrado.

Solución: anide otra capa de cuadros de contenido, el cuadro cuadrado exterior tiene un posicionamiento relativo y el cuadro de contenido interior es un posicionamiento absoluto; el ancho y el alto del cuadro interior se basan en el cuadro cuadrado exterior, el código es el siguiente

<div class="box-wrap">
    <div class="box-content">我是内容区域</div>
</div>

.box-wrap {
    position: relative;
    width: 20%;
    padding-top: 20%;
}

.box-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: burlywood;
}

La clase .box-content es un cuadro de contenido y podemos restaurar el borrador del diseño como queramos en el cuadro de contenido.

Si el área cuadrada solo necesita mostrar imágenes, el mismo motivo es el siguiente

<div class="box-wrap">
    <img src="./img/A.webp" alt="">
</div>

.box-wrap {
    position: relative;
    width: 20%;
    padding-top: 20%;
}

.box-wrap > img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
}

Aquí hemos implementado una imagen cuadrada adaptable.

ventaja

No se requiere ninguna otra configuración, configuraciones flexibles y gran escalabilidad.

defecto

Es necesario anidar una capa adicional de cuadros de contenido (opinión personal)

diamante

Como sugiere el nombre, es bastante feo; es el atributo css relación de aspecto

documentación MDN de relación de aspecto

relación de aspecto , en resumen, es la relación de aspecto. De nada sirve decir más, vayamos al código.

<div class="box-square">我是内容</div>

.box-square {
    aspect-ratio: 1 / 1;
    /* aspect-ratio: 1; 可简写 */
    width: 20%;
    background: chocolate;
}

avance

Un atributo, el cuadrado adaptativo, está bien; no importa qué tan bueno sea el atributo, depende de la compatibilidad y la compatibilidad del navegador.

ventaja

Los atributos son fáciles de entender, no se requiere ninguna otra configuración y no se requieren cuadros de contenido anidados.

defecto

El único inconveniente es la compatibilidad. Básicamente, todo lo que debería ser compatible lo será en 2023. ¡Este asunto es difícil de completar!

úsalo mientras aprendes

Hasta ahora, los puntos de conocimiento deben dominarse; realicemos un requisito comercial real, como se muestra en la figura.

Para realizar este diseño, supongamos que el ancho total es de 1000 px, el espacio izquierdo y derecho de las tarjetas de producto es de 12 px y el diseño requiere adaptativo + responsivo.

Porcentaje + implementación de relleno

<main>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
   <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <div class="shop-img"><img src="./img/A.webp" alt=""></div>
        <div class="shop-title">这是小黎测试的文字区域，实际运用一下百分比+padding实现自适应方形布局。</div>
    </div>
</main>
main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .shop {
        width: calc(25% - 9px);
        box-shadow: 0 0 8px #0002;
        border-radius: 4px;
       overflow: hidden;

        .shop-img {
            position: relative;
            width: 100%;
           padding-top: 100%;

            > img {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 1;
                object-fit: cover;
            }
        }

        .shop-title {
            padding: 8px;
            font-size: 14px;
            color: #232323;
        }
    }
}

@media only screen and (max-width: 768px) {
    main {

        .shop {
            width: calc(50% - 6px);
            margin-bottom: 12px;
        }
    }
}

veamos el efecto

Implementación de relación de aspecto

Usando el atributo de relación de aspecto, podemos anidar un cuadro cuadrado exterior menos

<main>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
    <div class="shop">
        <img src="./img/A.webp" alt="">
        <div class="shop-title">这是小黎测试的文字区域，实际运用aspect-ratio实现自适应方形布局。</div>
    </div>
</main>

El estilo básicamente sigue siendo el mismo, sólo cambia la parte relevante de la imagen.

main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

   .shop {
        width: calc(25% - 9px);
        box-shadow: 0 0 8px #0002;
        border-radius: 4px;
        overflow: hidden;

        > img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .shop-title {
            padding: 8px;
            font-size: 14px;
            color: #232323;
        }
    }
}

@media only screen and (max-width: 768px) {
    main {
        .shop {
            width: calc(50% - 6px);
            margin-bottom: 12px;
        }
    }
}

veamos el efecto

expandir

En los negocios reales, los diseños aplicados no son sólo cuadrados, sino también rectángulos, círculos, etc.

Veamos otro requisito: la interfaz de usuario estipula que la relación de aspecto del área de la imagen es 4:3 y la imagen proporcionada también es 4:3.

En general, nuestra solución es: establecer el ancho de la imagen y la altura será adaptable. Esto es relativamente simple, pero también hay algunos problemas; por ejemplo, la relación de aspecto de la imagen no es 4:3, más o menos, o la imagen cargada es irregular; esto hará que el diseño de nuestra página sea incontrolable, por lo que -llamado pérdida Está a mil millas de distancia.

En este momento, la robustez y escalabilidad del código están involucradas. Como desarrollador front-end, personalmente creo que la página debe tener una buena experiencia de usuario, en lugar de capacitar a los usuarios. A continuación, utilizo porcentaje + relleno, relación de aspecto y otras soluciones para realizar el escenario empresarial.

Tomando prestado el ejemplo del cuadrado, aquí solo pego el código clave.

Porcentaje + implementación de relleno

main {
    .shop {
        .shop-img {
            width: 100%;
            padding-top: 75%;
        }
    }
}

Implementación de relación de aspecto

main {
    .shop {
        > img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
        }
    }
}

mira el efecto

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

1. ¿Qué es?

En HTML, cada elemento puede entenderse como un cuadro. Durante el proceso de análisis del navegador, participará el reflujo y el redibujado:

• Redistribución: el motor de diseño calcula el tamaño y la posición de cada cuadro en la página en función de varios estilos.
• Redibujar: después de calcular la posición, el tamaño y otros atributos del modelo de caja, el navegador dibuja de acuerdo con las características de cada caja.

El mecanismo específico de análisis y representación del navegador es el siguiente:

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-sanguijuela, se recomienda guardar la imagen y cargarla directamente (img-dfKKrtqV-1683893248605)(nulo)]

• Analizar HTML, generar árbol DOM, analizar CSS, generar árbol CSSOM
• Combine el árbol DOM y el árbol CSSOM para generar un árbol de renderizado
• Diseño (reflujo): según el árbol de renderizado generado, se realiza un reflujo (diseño) para obtener la información geométrica (posición, tamaño) del nodo.
• Pintura (redibujo): según la información geométrica obtenida por el árbol de renderizado y el reflujo, se obtiene el píxel absoluto del nodo.
• Pantalla: envíe píxeles a la GPU y muéstrelos en la página

En la etapa de representación inicial de la página, inevitablemente se activa el reflujo, que puede entenderse como un elemento que está en blanco al comienzo de la página, y luego se agregan nuevos elementos para cambiar el diseño de la página.

Cuando DOMmodificamos DOM el tamaño geométrico (como modificar el ancho y alto de los elementos u ocultar elementos, etc.), el navegador necesita volver a calcular las propiedades geométricas del elemento y luego dibujar los resultados calculados.

Cuando nuestra DOM modificación del elemento provoca un cambio de estilo ( coloro background-color), pero no afecta sus propiedades geométricas, el navegador no necesita volver a calcular las propiedades geométricas del elemento y dibuja directamente un nuevo estilo para el elemento, que solo activa redibujando

2. Cómo activar

Para reducir la cantidad de reflujos y redibujos, primero comprenda cómo se activan los reflujos y los redibujados.

Sincronización del disparador de reflujo

La etapa de reflujo es principalmente para calcular la posición y la información geométrica de los nodos, por lo que cuando el diseño de la página y la información geométrica cambian, se requiere reflujo, de la siguiente manera:

• Agregar o eliminar elementos DOM visibles
• La posición del elemento cambia.
• El tamaño del elemento cambia (incluidos márgenes, bordes interiores, tamaño del borde, alto y ancho, etc.)
• Cambios de contenido, como cambios de texto o una imagen reemplazada por otra imagen de diferente tamaño
• Cuando la página comienza a renderizarse (esto no se puede evitar)
• El tamaño de la ventana del navegador cambia (porque el reflujo calcula la posición y el tamaño de los elementos en función del tamaño de la ventana gráfica)

También hay algunas operaciones que se pasan por alto fácilmente: obtener el valor de algunos atributos específicos

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

Estos atributos tienen una cosa en común: deben calcularse sobre la marcha. Por lo tanto, para obtener estos valores, el navegador también realizará un reflujo.

Además getComputedStyle del método, el principio es el mismo.

volver a dibujar el tiempo del disparador

Activar un reflujo definitivamente activará un redibujo

La página puede entenderse como una pizarra, y en la pizarra hay una pequeña flor pintada. Ahora queremos mover esta flor de izquierda a derecha, luego debemos determinar la posición específica a la derecha, dibujar la forma (refluir) y luego pintar su color original (volver a dibujar).

Además, existen otros comportamientos de redibujado:

• modificación de color
• Modificación de la orientación del texto
• modificación de sombra

Mecanismo de optimización del navegador

Dado que cada reordenamiento provocará un consumo de cálculo adicional, la mayoría de los navegadores optimizarán el proceso de reordenamiento poniendo en cola las modificaciones y ejecutándolas en lotes. El navegador colocará la operación de modificación en la cola y la cola no se vaciará hasta que pase un período de tiempo o la operación alcance un umbral.

Cuando obtenga la operación de la información de diseño, la cola se verá obligada a actualizarse, incluidos los métodos mencionados anteriormente offsetTopdevolverán los datos más recientes.

Por lo tanto, el navegador debe borrar la cola y activar un repintado de reflujo para devolver el valor correcto.

3. Cómo reducir

Hemos aprendido cómo activar el reflujo y volver a dibujar la escena, y la experiencia de evitar el reflujo se detalla a continuación:

• Si desea establecer el estilo del elemento, cambie el nombre de clase del elemento class(en la medida de lo posible en la capa más interna del árbol DOM)
• Evite configurar múltiples estilos en línea
• Aplica la animación del elemento, utilizando el valor o valor positiondel atributo (como se menciona en el ejemplo anterior)fixedabsolute
• Evite utilizar tableel diseño, tableel tamaño y el contenido de cada elemento en el cambio provocará que se vuelva tablea calcular todo
• Para esas animaciones complejas, configúrelas position: fixed/absolutepara que el elemento del documento fluya tanto como sea posible, a fin de reducir el impacto en otros elementos.
• Usando la aceleración de hardware css3, puede crear transform, opacityy filtersestas animaciones no causan redibujado por reflujo.
• Evite JavaScriptlas expresiones CSS

Cuando se usa para JavaScriptinsertar dinámicamente múltiples nodos, se puede usar DocumentFragment. Una vez creado, se puede insertar una vez. Puede evitar el rendimiento de renderizado múltiple.

Pero a veces, inevitablemente refluiremos o redibujaremos, podemos aprovecharlos mejor.

Por ejemplo, al modificar el diseño de un elemento varias veces, es probable que hagamos lo siguiente

const el = document.getElementById('el')
for(let i=0;i<10;i++) {
    el.style.top  = el.offsetTop  + 10 + "px";
    el.style.left = el.offsetLeft + 10 + "px";
}

Cada ciclo necesita obtener múltiples offsetatributos, lo que es peor: se puede almacenar en caché en forma de variables y luego enviarse al navegador para emitir una solicitud de recálculo una vez completado el cálculo.

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el') 
let offLeft = el.offsetLeft, offTop = el.offsetTop

// 在JS层面进行计算
for(let i=0;i<10;i++) {
  offLeft += 10
  offTop  += 10
}

// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

También podemos evitar cambiar estilos y usar nombres de clases para fusionar estilos.

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

Utilice nombres de clases para combinar estilos

<style>
    .basic_style {
        width: 100px;
        height: 200px;
        border: 10px solid red;
        color: red;
    }
</style>
<script>
    const container = document.getElementById('container')
    container.classList.add('basic_style')
</script>

El primero activa un cambio en el árbol de renderizado cada vez que se opera por separado (los nuevos navegadores no lo harán).

Para desencadenar un cambio en el árbol de renderizado, lo que resulta en el correspondiente proceso de reflujo y redibujado

Después de fusionar, significa que enviamos todos los cambios a la vez.

display: noneTambién podemos eliminarlo de la página configurando atributos de elementos y luego realizar operaciones posteriores, que no activarán el reflujo ni el redibujado. Este proceso se denomina operación fuera de línea.

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

Después de la operación fuera de línea

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'

2.16 ¿En qué circunstancias fallará el atributo de índice z?

Por lo general, el índice z se utiliza cuando hay dos etiquetas superpuestas y, en determinadas circunstancias, una de ellas aparece encima o debajo de la otra. Cuanto mayor sea el valor del índice z, mayor será la capa. El atributo de posición del elemento de índice z debe ser relativo, absoluto o fijo.

El atributo z-index fallará en los siguientes casos:

• Cuando la posición del elemento padre es relativa, el índice z del elemento hijo deja de ser válido. Solución: la posición del elemento principal se cambia a absoluta o estática;
• El elemento no tiene un atributo de posición establecido en un atributo no estático. Solución: establezca el atributo de posición del elemento en relativo, absoluto o fijo;
• El elemento también establece float mientras configura el índice z. Solución: elimine el flotador y cámbielo a display：inline-block;

20230116, un amigo agregó:

• En el iOS 13sistema del terminal móvil, -webkit-overflow-scrolling:touchtambién se z-indexinvalidará y touchsustituirá porunset

Por motivos específicos, consulte este artículo: ¿ Por qué mi índice z ya no funciona?

2.17 Utilice js nativo para lograr los siguientes efectos: haga clic en el ícono en el contenedor, el borde del ícono se convierte en borde: 1px rojo sólido, haga clic en el espacio en blanco para restablecer

const box = document.getElementById('box');

function isIcon(target) {
 return target.className.includes('icon');
}

box.onclick = function(e) {
 e.stopPropagation();
 const target = e.target;
 if (isIcon(target)) {
   target.style.border = '1px solid red';
 }
}

const doc = document;

doc.onclick = function(e) {
 const children = box.children;
 for(let i = 0; i < children.length; i++) {
   if (isIcon(children[i])) {
     children[i].style.border = 'none';
   }
 }
}

2.18 posición: ¿fijo debe colocarse en relación con la ventana del navegador?

incierto.

position:fixed;El elemento se sacará del flujo normal del documento y no se reservará ningún espacio para el elemento. En cambio, la posición del elemento se especifica especificando la posición del elemento en relación con la ventana gráfica de la pantalla (ventana gráfica) y la posición de el elemento no cambiará cuando se desplace la pantalla. fixedLa propiedad crea un nuevo contexto de apilamiento.

Cuando el atributo transform, perspectiveo del ancestro de un elemento , el contenedor cambia de la ventana gráfica a ese ancestro.filter非 none

2.19 ¿Qué son los selectores de CSS? ¿Cuáles son las prioridades? ¿Qué propiedades se pueden heredar?

1. Selector

Los selectores CSS son la primera parte de una regla CSS

Es la forma en que los elementos y otras partes se combinan para indicarle al navegador qué elemento HTML debe seleccionarse como valor de la propiedad CSS en la regla de la aplicación.

El elemento seleccionado por el selector se llama "objeto selector".

Empezamos Htmlcon una estructura

<div id="box">
	<div class="one">
	    <p class="one_1"></p>
	    <p class="one_1"></p>
	</div>
	<div class="two"></div>
	<div class="two"></div>
	<div class="two"></div>
</div>

Los selectores de atributos más cssutilizados son:

1- id选择器（#box），选择id为box的元素
2- 类选择器（.one），选择类名为one的所有元素
3- 标签选择器（div），选择标签为div的所有元素
4- 后代选择器（#box div），选择id为box元素内部所有的div元素
5- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
6- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
7- 群组选择器（div,p），选择div、p的所有元素

También hay algunos selectores que se utilizan con menos frecuencia:

• selector de pseudoclase

1:link ：选择未被访问的链接
2:visited：选取已被访问的链接
3:active：选择活动链接
4:hover ：鼠标指针浮动在上面的元素
5:focus ：选择具有焦点的
6:first-child：父元素的首个子元素

• Selector de pseudoelementos

1:first-letter ：用于选取指定选择器的首字母
2:first-line ：选取指定选择器的首行
3:before : 选择器在被选元素的内容前面插入内容
4:after : 选择器在被选元素的内容后面插入内容

• selector de atributos

1[attribute] 选择带有attribute属性的元素
2[attribute=value] 选择所有使用attribute=value的元素
3[attribute~=value] 选择attribute属性包含value的元素
4[attribute|=value]：选择attribute属性以value开头的元素

CSS3Los nuevos selectores son los siguientes :

• Selector jerárquico (p~ul), selecciona cada elemento ul precedido por un elemento p
• selector de pseudoclase

1:first-of-type 父元素的首个元素
2:last-of-type 父元素的最后一个元素
3:only-of-type 父元素的特定类型的唯一子元素
4:only-child 父元素中唯一子元素
5:nth-child(n) 选择父元素中第N个子元素
6:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
7:last-child 父元素的最后一个元素
8:root 设置HTML文档
9:empty 指定空的元素
10:enabled 选择被禁用元素
11:disabled 选择被禁用元素
12:checked 选择选中的元素
13:not(selector) 选择非 <selector> 元素的所有元素

• selector de atributos

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

2. Prioridad

Creo que todo el mundo CSSestá familiarizado con la prioridad de los selectores:

En línea > Selectores de ID > Selectores de clase > Selectores de etiquetas

En el nivel de cálculo específico, la prioridad está determinada por los valores de A, B, C y D, y sus reglas de cálculo de valores son las siguientes:

• A = 1 si existen estilos en línea, de lo contrario A = 0
• El valor de B es igual al número de apariciones del selector de ID.
• El valor de C es igual al número total de apariciones de selectores de clases, selectores de atributos y pseudoclases.
• El valor de D es igual al número total de apariciones de selectores de etiquetas y pseudoelementos.

Aquí hay un ejemplo:

1#nav-global > ul > li > a.nav-link

Aplique el algoritmo anterior para encontrar A B C Del valor de a su vez:

• A = 0 porque no hay estilos en línea
• Un total de 1 ocurrencia del selector de ID, B = 1
• El selector de clase aparece 1 vez, el selector de atributos aparece 0 veces y el selector de pseudoclase aparece 0 veces, entonces C = (1 + 0 + 0) = 1
• El selector de etiquetas aparece 3 veces y el pseudoelemento aparece 0 veces, por lo que D = (3 + 0) = 3

El cálculo anterior A, B, C, Dse puede abreviar como:(0, 1, 1, 3)

Después de saber cómo se calcula la prioridad, echemos un vistazo a las reglas de comparación:

• Compare de izquierda a derecha, el más grande tiene mayor prioridad
• Si son iguales, continúa moviéndote un bit hacia la derecha para comparar.
• Si los 4 bits son iguales, el último sobrescribirá al primero.

Después de las reglas de cálculo de prioridad anteriores, sabemos que los estilos en línea tienen la máxima prioridad. Si los estilos externos necesitan anular los estilos en línea, debemos usar!important

3. Propiedades heredadas

En css, la herencia se refiere a establecer algunos atributos para el elemento padre, y los elementos descendientes automáticamente tendrán estos atributos.En cuanto al atributo de herencia, se puede dividir en:

• atributo de familia de fuentes

1font:组合字体
2font-family:规定元素的字体系列
3font-weight:设置字体的粗细
4font-size:设置字体的尺寸
5font-style:定义字体的风格
6font-variant:偏大或偏小的字体

• Propiedades de la serie de texto

1text-indent：文本缩进
2text-align：文本水平对齐
3line-height：行高
4word-spacing：增加或减少单词间的空白
5letter-spacing：增加或减少字符间的空白
6text-transform：控制文本大小写
7direction：规定文本的书写方向
8color：文本颜色

• visibilidad del elemento

1visibility

• Propiedades de diseño de tabla

1caption-side：定位表格标题位置
2border-collapse：合并表格边框
3border-spacing：设置相邻单元格的边框间的距离
4empty-cells：单元格的边框的出现与消失
5table-layout：表格的宽度由什么决定

• atributo de lista

1list-style-type：文字前面的小点点样式
2list-style-position：小点点位置
3list-style：以上的属性可通过这属性集合

• cita

1quotes：设置嵌套引用的引号类型

• propiedades del cursor

1cursor：箭头可以变成需要的形状

Algunos puntos especiales en herencia:

• El color de fuente de una etiqueta no se puede heredar
• El tamaño de la fuente de la etiqueta h1-h6 no se puede heredar

sin propiedades heredadas

• mostrar
• Atributos de texto: alineación vertical, decoración de texto
• Propiedades del modelo de caja: ancho, alto, márgenes interior y exterior, bordes, etc.
• Propiedades del fondo: imagen de fondo, color, posición, etc.
• Propiedades de posicionamiento: flotador, flotador claro, posición de posición, etc.
• Generar atributos de contenido: contenido, contador-reinicio, contraincremento
• Atributos de estilo de contorno: estilo de contorno, ancho de contorno, color de contorno, contorno
• Atributos de estilo de página: tamaño, salto de página antes, salto de página después

2.20 ¿Cómo activar BFC y qué escenarios de aplicación tiene BFC?

flujo de documentos

Antes de presentar BFC, debemos presentarle el flujo de documentos.

El flujo de documentos que solemos decir se divide en realidad en tres tipos 定位流: , 浮动流y 普通流.

posicionamiento absoluto

Si el atributo del elemento positiones absoluteo fixed, es un elemento absolutamente posicionado.

En el diseño de posicionamiento absoluto, el elemento estará fuera del flujo normal en su conjunto, por lo que el elemento de posicionamiento absoluto no afectará a sus elementos hermanos, y la posición específica del elemento está determinada por las coordenadas del posicionamiento absoluto.

Se coloca en relación con el bloque que lo contiene, propiedades CSS relevantes : top, bottom, ;leftright

Para position: absolute, el posicionamiento del elemento será relativo al más cercano de los elementos principales relative、fixed、absolute, o relativo al cuerpo si no hay ninguno;

Para position:fixed, normalmente se coloca en relación con la ventana del navegador, pero cuando el atributo del ancestro del elemento no lo es , se ubicará en relación con el ancestrotransformnone .

flotar

En el diseño flotante, los elementos aparecen primero en la posición del flujo normal y luego se desplazan hacia la izquierda o hacia la derecha tanto como sea posible según la dirección flotante; el efecto es similar al ajuste del texto en tipografía.

flujo normal

El flujo ordinario en realidad se refiere a FC en BFC. FC( Formatting Context), traducido literalmente, es el contexto de formato, que es un área de representación en la página, con un conjunto de reglas de representación que determinan cómo se distribuyen sus subelementos, así como la relación y función con otros elementos.

En el flujo normal, los elementos se disponen de arriba a abajo según sus posiciones secuenciales en HTML. En este proceso, los elementos en línea se organizan horizontalmente hasta que la línea se llena y luego se ajustan. Los elementos a nivel de bloque se representan como una línea completamente nueva.

A menos que se especifique lo contrario, todos los elementos tienen de forma predeterminada el posicionamiento de flujo normal, es decir, la posición de un elemento en el flujo normal está determinada por la posición del elemento en el documento HTML.

Concepto BFC

Primero mire la definición de BFC en MDN:

El contexto de formato de bloque ( Block Formatting Context, BFC) es parte de la representación CSS visual de una página web y es el área donde ocurre el proceso de diseño de cuadros de bloque y donde los elementos flotantes interactúan con otros elementos.

Los elementos con BFCcaracterísticas pueden considerarse contenedores independientes aislados, los elementos dentro del contenedor no afectarán el diseño de los elementos exteriores y BFCtienen algunas características que los contenedores comunes no tienen.

En términos simples, puede BFCentenderse como una gran caja cerrada, por abrumadores que sean los elementos dentro de la caja, no afectará el exterior.

Además de BFC, existen:

• IFC(contexto de formato a nivel de fila) - inlineen línea
• GFC(contexto de formato de diseño de cuadrícula) -display: grid
• FFC(contexto de formato adaptable) - display: flexodisplay: inline-flex

Nota : El mismo elemento no puede existir en dos al mismo tiempo BFC.

Modo de disparo BFC

MDN ha escrito mucho sobre las condiciones de activación de BFC . En resumen, los métodos de activación comunes son (solo se debe cumplir una condición para activar las características de BFC):

• el elemento raíz, es decir<html>
• Elemento flotante: floatel valor es left,right
• overflowEl valor no es visible, es decir auto, scroll,hidden
• displayLos valores son inline-block, table-cell, , table-caption, table, inline-table, flex, inline-flex,gridinline-grid
• Elementos absolutamente posicionados: positionlos valores son absolute,fixed

Características del BFC

• BFC es un contenedor independiente en la página y los elementos secundarios dentro del contenedor no afectarán a los elementos externos.
• Las cajas a nivel de bloque dentro del BFC están dispuestas verticalmente una tras otra
• Los elementos adyacentes a nivel de bloque bajo el mismo BFC pueden tener un colapso del margen, y la creación de un nuevo BFC puede evitar el colapso del margen.
• El lado izquierdo del cuadro de margen de cada elemento ( margin box) toca el lado izquierdo del cuadro de borde del bloque contenedor ( border box) (o viceversa para el formato de derecha a izquierda), incluso con puntos flotantes.
• La región del cuadro flotante no se superpondrá con el BFC
• Al calcular la altura de BFC, los elementos flotantes también participarán en el cálculo.

solicitud

BFC es un contenedor independiente aislado en la página, y los elementos secundarios dentro del contenedor no afectarán a los elementos externos, y viceversa. Podemos utilizar esta función de BFC para hacer muchas cosas.

Diseño adaptable de dos columnas

La columna de la izquierda es flotante (se acepta ancho fijo o ancho variable) y BFC está habilitado para la columna de la derecha.

<div>
    <div class="left">浮动元素，无固定宽度</div>
    <div class="right">自适应</div>
</div>
* {
    margin: 0;
    padding: 0;
}
.left {
    float: left;
    height: 200px;
    margin-right: 10px;
    background-color: red;
}
.right {
    overflow: hidden;
    height: 200px;
    background-color: yellow;
}

Efecto:

• Configure la columna izquierda para que flote hacia la izquierda y contraiga su propia altura para que otros elementos a nivel de bloque puedan ocupar la misma fila que ella.
• La columna de la derecha es un elemento div a nivel de bloque, que utiliza sus propias características de flujo para llenar toda la fila.
• Establezca desbordamiento: oculto en la columna de la derecha para activar la función BFC para aislarse de los elementos flotantes en la columna de la izquierda y no ocupar toda la fila.

Esta es una de las características del BFC mencionadas anteriormente: el área de la caja flotante no se superpondrá con el BFC

Evitar que los márgenes se superpongan

Márgenes superpuestos entre elementos hermanos

<div>
    <div class="child1"></div>
    <div class="child2"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
.child1 {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
}
.child2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: green;
}

Efecto:

Dos elementos a nivel de bloque, el div rojo está a 10 px desde abajo y el div verde está a 20 px desde arriba. Lógicamente, la distancia entre los dos elementos a nivel de bloque debe ser de 30 px, pero en realidad se toma el que tiene mayor distancia. , es decir, 20px.

Los márgenes superior e inferior de los elementos a nivel de bloque a veces se fusionan (o doblan) en un margen exterior, cuyo tamaño es el más grande. Este comportamiento se denomina colapso del margen exterior (superposición). Tenga en cuenta que esto sucede cuando el elemento entre niveles de bloque elementos bajo el mismo BFC

Según la función BFC, la creación de un nuevo BFC no provocará un colapso del margen. Por ejemplo, si envolvemos una capa de contenedores en la capa exterior de sus dos divs, agregamos atributos overflow: hiddeny activamos BFC, entonces los dos divs no pertenecen al mismo BFC.

<div>
    <div class="parent">
        <div class="child1"></div>
    </div>
    <div class="parent">
        <div class="child2"></div>
    </div>
</div>
.parent {
    overflow: hidden;
}

/* ... */

Existen otras soluciones además de activar BFC para el problema de superponer los márgenes exteriores de elementos hermanos. Por ejemplo, si solo usa los márgenes superior o inferior de manera uniforme, no tendrá los problemas anteriores.

Los márgenes de los elementos padre e hijo se superponen

Esta condición existe entre un elemento padre y su primer o último elemento hijo (elementos anidados).

Si no hay borde, relleno, contenido en línea entre el elemento padre y su primer/último elemento hijo, y no se crea ningún contexto de formato de bloque, o flotadores claros separan los márgenes de los dos, entonces los márgenes del elemento hijo se "desbordan" fuera de el elemento padre.

<div id="parent">
  <div id="child"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
#parent {
    width: 200px;
    height: 200px;
    background-color: green;
    margin-top: 20px;
}
#child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 30px;
}

Como se muestra arriba, el div rojo está dentro del div verde y está configurado margin-topen 30 px, pero descubrimos que la parte superior del div rojo coincide con la parte superior del div verde y no está a 30 px de la parte superior, sino que se desborda hacia el div verde. fuera del elemento padre para el cálculo. Es decir, el elemento principal está a solo 20 píxeles de la parte superior, pero se ve afectado por el desbordamiento del elemento secundario y el margen exterior se superpone. Si se toma el valor mayor, la distancia desde la parte superior es de 30 píxeles.

Solución:

• Activar BFC para el elemento principal (como agregar desbordamiento: oculto)
• Agregar borde al elemento principal
• Agregar relleno al elemento padre

Esto logrará el efecto deseado:

Borre el flotador para resolver el problema de colapsar la altura del elemento padre

Cuando el elemento secundario en el contenedor está configurado para flotar, se separa del flujo del documento y la altura total del elemento principal en el contenedor es solo la altura de la parte del borde.

<div class="parent">
  <div class="child"></div>
</div>
* {
    margin: 0;
    padding: 0;
}
.parent {
    border: 4px solid red;
}
.child {
    float: left;
    width: 200px;
    height: 200px;
    background-color: blue;
}

Solución: active BFC para el elemento padre, para que tenga características BFC: al calcular la altura de BFC, los elementos flotantes también participarán en el cálculo

.parent {
    overflow: hidden;
    border: 4px solid red;
}

Todos usamos overflow: hiddenla activación de BFC anteriormente, porque de hecho se usa comúnmente, pero hay más de una forma de activar BFC.

Como se escribió anteriormente, puede configurar float: left;, float: right;, display: inline-block;, , , for o etc., todo lo cual se puede activar, pero el ancho del elemento principal puede no ser el mismo, pero la altura del overflow: auto;elemento principal se extiende.display: flex;display: table;positionabsolutefixed

Por supuesto, la aplicación real no es elegir uno al azar, sino elegir según la escena.

2.21 Hablar sobre la comprensión de la ingeniería CSS.

CSS está diseñado para resolver los siguientes problemas:

1. Diseño macro : ¿Cómo organizar el código CSS, cómo dividirlo, cómo diseñar la estructura del módulo?
2. Optimización de codificación : ¿cómo escribir mejor CSS?
3. Compilación : ¿Qué hago con mi CSS para que se empaquete de manera óptima?
4. Mantenibilidad : una vez escrito el código, ¿cómo minimizar el costo de cambios posteriores? ¿Cómo garantizar que cualquiera de los colegas pueda hacerse cargo fácilmente?

Las siguientes tres direcciones son prácticas de ingeniería CSS populares y universales:

• Preprocesador: Less, Sass, etc.;
• Complementos de ingeniería importantes: PostCss;
• Cargadores de paquetes web, etc.

Con base en estas tres direcciones, se pueden derivar algunos subproblemas típicos, aquí los analizamos uno por uno:

(1) Preprocesador: ¿Por qué utilizar un preprocesador? ¿Qué problema parece resolver?

El preprocesador es en realidad la "rueda" del mundo CSS. Los preprocesadores nos permiten escribir un lenguaje similar a CSS que en realidad no es CSS y luego compilarlo en código CSS:

Entonces, ¿por qué escribir código CSS que esté bien escrito y por qué quieres escribir "similar a CSS"? Esto es lo mismo que usar JS para lograr todas las funciones, pero al final es lo mismo que escribir la sintaxis de plantilla jsx de React o Vue.

Con la creciente complejidad del negocio front-end, se plantean los siguientes requisitos para CSS en la ingeniería front-end:

1. Diseño macro: esperamos optimizar la estructura de directorios de los archivos CSS y reutilizar los archivos CSS existentes;
2. Optimización de codificación: esperamos poder escribir CSS con una estructura clara, concisa y fácil de entender, y necesitamos que tenga una relación jerárquica anidada clara, en lugar de un método de escritura uno a uno indiscriminado; esperamos que tenga variables características, capacidades de cálculo y capacidades de bucle Espere a que haya una mayor programabilidad, para que podamos escribir menos código inútil;
3. En términos de mantenibilidad: una mayor programabilidad significa una mejor estructura del código, la reutilización significa una estructura de directorios más simple y una mayor capacidad de expansión. Si se pueden lograr estos dos puntos, naturalmente traerá una mayor mantenibilidad.

Estos tres puntos son lo que el CSS tradicional no puede hacer y es el problema que resuelve el preprocesador. Los preprocesadores generalmente tienen las siguientes características:

• La capacidad de anidar códigos para reflejar la relación jerárquica entre diferentes atributos CSS mediante el anidamiento;
• Soporte para definir variables CSS;
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？

它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

PostCss 在业务中的使用场景非常多：

• 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
• 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
• 允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；

（3）Webpack 能处理 CSS 吗？如何实现？

• Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；
• Webpack 在 loader 的辅助下，是可以处理 CSS 的。

如何用 Webpack 实现对 CSS 的处理：

• Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
• 注意，答出“用什么”有时候可能还不够，面试官会怀疑你是不是在背答案，所以你还需要了解每个 loader 都做了什么事情：
  • css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
  • style-loader：创建style标签，把 CSS 内容写入标签。

在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。

2.22 为什么有时候⽤translate来改变位置⽽不是使用position进行定位？

translate 是 transform 属性的⼀个值。

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。

transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。

因此translate()更⾼效，可以缩短平滑动画的绘制时间。

⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

具体的原理可查看 【前端基础系列】CSS篇-带你搞懂“硬件加速”

2.23 硬件加速的原理是什么？

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

首先，我们先从 CPU 和 GPU 开始了解。

CPU 和 GPU 的区别

CPU 即中央处理器，GPU 即图形处理器。

CPUEs el cerebro de la computadora, el que proporciona un conjunto de conjuntos de instrucciones, y los programas que escribimos eventualmente controlarán CPUel funcionamiento de la computadora a través de instrucciones. Decodifica la instrucción y la ejecuta a través de circuitos lógicos. Todo el proceso de ejecución se divide en varias etapas, denominadas canalización. El proceso de instrucción consta de 指令、译码、执行、取数、写回cinco pasos de búsqueda, que es un ciclo de instrucción. CPUContinuará ejecutando ciclos de instrucciones para completar diversas tareas.

GPU, es Graphics ProcessingUnituna abreviatura, es una parte muy importante de una tarjeta gráfica moderna, su estado es CPUconsistente con el estado de la placa base y su tarea principal es acelerar la velocidad de procesamiento de gráficos. La GPU es el "cerebro" de la tarjeta gráfica, que determina el grado y la mayor parte del rendimiento de la tarjeta gráfica, y también es la base de la diferencia entre las tarjetas gráficas 2D y las tarjetas gráficas 3D. Los chips de visualización 2D dependen principalmente de la potencia de procesamiento de la CPU cuando procesan imágenes 3D y efectos especiales, lo que se denomina "aceleración suave". El chip de visualización 3D concentra la imagen tridimensional y las funciones de procesamiento de efectos especiales en el chip de visualización, que es la función denominada "aceleración de hardware".

Para explicar la diferencia entre los dos, primero hay que entender las similitudes entre los dos: ambos tienen buses y conexiones externas, tienen sus propios sistemas de caché y unidades de operación lógicas y digitales.

En una palabra, ambos están diseñados para realizar tareas informáticas.

La diferencia entre los dos radica en la diferencia estructural entre el sistema de caché en chip y la unidad de operación lógica digital:

• CPUAunque hay varios núcleos, el número total no supera los dos dígitos. Cada núcleo tiene un caché lo suficientemente grande y suficientes unidades de operación digital y lógica, y cuenta con la asistencia de muchos hardware que aceleran el juicio de rama o incluso el juicio lógico más complejo;
• GPUEl número de núcleos es mucho mayor CPUque el de muchos núcleos (NVIDIA Fermi tiene 512 núcleos). El tamaño de caché de cada núcleo es relativamente pequeño y la unidad de operación lógica digital también es pequeña y simple ( GPUsiempre ha sido más débil en los cálculos de punto flotante inicialmente CPU).

Como resultado, es CPUbueno para procesar tareas informáticas con pasos informáticos complejos y dependencias de datos complejas, como informática distribuida, compresión de datos, inteligencia artificial, simulación física y muchas otras tareas informáticas.

GPUPor razones históricas, fue producido para videojuegos (hasta ahora su principal motor sigue siendo el creciente mercado de los videojuegos), y un tipo de operación que aparece a menudo en los juegos 3D es realizar la misma operación en datos masivos, como : para cada uno Se realiza la misma transformación de coordenadas en los vértices y el valor del color se calcula de acuerdo con el mismo modelo de iluminación para cada vértice.

La arquitectura de muchos núcleos de la GPU es muy adecuada para enviar el mismo flujo de instrucciones a muchos núcleos en paralelo y ejecutarlos con diferentes datos de entrada. Es ampliamente utilizado en el campo de la informática general, incluyendo: análisis numérico, procesamiento masivo de datos (clasificación, Map-Reduce, etc.), análisis financiero, etc.

En pocas palabras, cuando los programadores escriben programas para CPU, tienden a utilizar estructuras lógicas complejas para optimizar algoritmos con el fin de reducir el tiempo de ejecución de las tareas informáticas, es decir Latency. ThroughputCuando los programadores escriben programas para la GPU, aprovechan su capacidad para procesar cantidades masivas de datos y encubrirlos aumentando el rendimiento total de los datos ( ) Lantency.

En la actualidad, la diferencia entre CPUy GPUse está reduciendo gradualmente, porque la GPU también ha logrado grandes avances en el manejo de tareas irregulares y la comunicación entre subprocesos.

Pasos de ejecución para cada cuadro.

La frecuencia de actualización de un navegador general es de 60 HZ, es decir, 60 actualizaciones por segundo.

1000 ms / 60 hz = 16,6, es decir, 16.6msse representará aproximadamente un fotograma cada vez que se pasa por el navegador.

La representación de cada cuadro por parte del navegador debe completarse en 16 ms. Si se excede este tiempo, la representación de la página se bloqueará, lo que afectará la experiencia del usuario.

A modo de breve resumen, el navegador realizará las siguientes acciones de forma secuencial en cada cuadro:

• JavaScript: JavaScript implementa efectos de animación, operaciones de elementos DOM, etc.
• Style(Estilos calculados): determina qué reglas CSS se deben aplicar a cada elemento DOM.
• Layout(diseño): Calcula el tamaño y la posición de cada elemento DOM tal como aparecerá en la pantalla final. Dado que el diseño de los elementos de una página web es relativo, cualquier cambio en la posición de cualquier elemento provocará cambios en otros elementos, este proceso se denomina reflujo.
• Paint(Dibujo): dibuja texto, colores, imágenes, bordes, sombras, etc. de elementos DOM en múltiples capas.
• Composite(Fusión de capas de renderizado): combine las capas en un orden razonable y muéstrelas en la pantalla.

减少或者避免 layout，paint 可以让页面减少卡顿，动画效果更加流畅。

完整的渲染流程

更具体一些，一个完整的渲染步骤大致可总结为如下：

• 渲染进程将HTML内容转换为能够读懂的DOM树结构。
• 渲染引擎将CSS样式表转化为浏览器可以理解的 styleSheets ，计算出DOM节点的样式。
• 创建布局树，并计算元素的布局信息。
• 对布局树进行分层，并生成分层树。
• 为每个图层生成绘制列表，并将其提交到合成线程。
• 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
• 合成线程发送绘制图块命令DrawQuad给浏览器进程。
• 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

普通图层和复合图层

上面的介绍中，提到了 composite 概念。

可以简单的这样理解，浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层

• 渲染图层：又称默认复合层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。
• 复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）

某些特殊的渲染层会被提升为复合成层（Compositing Layers），复合图层拥有单独的 GraphicsLayer，而其他不是复合图层的渲染层，则和其第一个拥有 GraphicsLayer 父层共用一个。

每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。

Como puede Chrome源码调试 -> More Tools -> Rendering -> Layer bordersver, los amarillos son información de capas compuestas.

Aceleracion de hardware

La aceleración de hardware, intuitivamente hablando, depende de la GPU para lograr la aceleración de la representación de gráficos. La diferencia entre la aceleración de software y hardware es principalmente si la representación de gráficos es procesada por la GPU o la CPU. Si es una GPU, se considera hardware. -renderizado acelerado; de lo contrario, es renderizado por software.

Generalmente, después de habilitar la aceleración de hardware, un elemento se convertirá en una capa compuesta, que puede ser independiente del flujo normal de documentos. Después de la modificación, se puede evitar que se vuelva a dibujar toda la página y se puede mejorar el rendimiento.

Los métodos de aceleración de hardware más utilizados son:

• La forma más común: translate3d,translateZ
• opacityAnimación de atributo/transición (la capa compuesta se creará durante el proceso de ejecución de la animación y el elemento volverá al estado anterior después de que la animación no haya comenzado ni finalizado)
• will-changeAtributos (este punto de conocimiento es relativamente remoto), generalmente se usa opacityjunto translatecon (y se prueba, excepto los atributos mencionados anteriormente que pueden causar aceleración de hardware, otros atributos no se convertirán en una capa compuesta), la función es decirle al navegador en avance para cambiar, de modo que la navegación El compilador comenzará a realizar algún trabajo de optimización (es mejor publicarlo después de su uso)
• <video>, <iframe>, <canvas>y <webgl>otros elementos
• Otros, como flashcomplementos anteriores

Por supuesto, a veces queremos activar por la fuerza el renderizado por hardware, podemos usar las propiedades anteriores, como

1will-change: transform; 

o

1transform:translate3d(0, 0, 0);

Consideraciones para utilizar la aceleración de hardware

Usar la aceleración de hardware no es algo perfecto, como por ejemplo:

• Memoria. Pueden ocurrir fácilmente problemas de contenido si la GPU carga muchas texturas, especialmente en navegadores móviles, así que tenga en cuenta no utilizar aceleración de hardware para cada elemento de la página.
• El renderizado con la GPU puede afectar el suavizado de las fuentes. Esto se debe a que las GPU y las CPU tienen diferentes mecanismos de renderizado. Incluso si la aceleración del hardware finalmente se detiene, el texto seguirá apareciendo borroso durante la animación.

Por lo tanto, no utilice muchas capas compuestas; de lo contrario, la página puede atascarse más debido al consumo excesivo de recursos.

Al mismo tiempo, cuando utilice la aceleración de hardware, utilícela tanto como sea posible z-indexpara evitar que los navegadores creen una representación de capas compuestas para elementos posteriores de forma predeterminada.

El principio específico es el siguiente:

En webkit CSS3, si se agrega aceleración de hardware a un elemento y z-indexel nivel es relativamente bajo, entonces otros elementos detrás de este elemento (nivel más alto que este elemento, o el mismo, o releativelos absolutemismos atributos) se convertirán en capas compuestas de forma predeterminada. , si no se maneja adecuadamente, puede afectar en gran medida el rendimiento.

Para entenderlo de manera simple, en realidad se puede considerar como un concepto de composición implícita: si a es una capa compuesta y b está encima de a, entonces b también se convertirá implícitamente en una capa compuesta, lo que requiere atención especial.

2.24 ¿Cuáles son las ventajas y desventajas de la animación CSS y la animación JS?

animación css

ventaja

• Los navegadores pueden optimizar las animaciones.
• El código es relativamente simple y la dirección de ajuste del rendimiento es fija.
• Para navegadores de versión baja con un rendimiento de velocidad de fotogramas deficiente, CSS3se puede lograr una degradación natural y JSes necesario escribir código adicional.

defecto

• El control del proceso en ejecución es débil y la función de devolución de llamada de enlace de eventos no se puede adjuntar
• El código es largo, si quieres usarlo para CSSlograr una animación un poco más complicada, CSSel código se volverá muy engorroso al final.

animación js

ventaja

• La capacidad de control es muy fuerte y la animación se puede controlar durante el proceso de reproducción de la animación: es posible iniciar, pausar, reproducir, finalizar y cancelar.
• Los efectos de animación css3son más ricos que la animación, y algunos efectos de animación, como el movimiento curvo, el parpadeo y los efectos de desplazamiento de paralaje, jssolo se pueden completar mediante animación.
• CSS3Hay problemas de compatibilidad y JSla mayoría de las veces no hay problemas de compatibilidad.

defecto

• El código es más complejo que CSSla animación.
• JavaScriptSe ejecuta en el hilo principal del navegador, y hay otros JavaScriptscripts, cálculos de estilo, diseños, tareas de dibujo, etc., que deben ejecutarse en el hilo principal. La interferencia con él puede provocar que el hilo se bloquee, lo que provocará la pérdida de fotogramas.

2.25 ¿Cuáles son las formas de implementar animación en el front-end?

Los métodos de implementación de animación comúnmente utilizados en el front-end son los siguientes:

1. transitionpropiedad css3
2. animationpropiedad css3
3. Animación JS nativa
4. Usar canvasanimación de dibujo
5. animación SVG
6. animatefunción jquery
7. Usa imágenes gif

1.css3transition

transitionAtributos:

Cómo los valores de propiedad utilizados para establecer estilos pasan sin problemas de un estado a otro

gramática:

1transition: property duration timing-function delay;

transitiones un atributo abreviado, que se puede dividir en cuatro atributos de transición. Puedes transition: 值1，值2，值3，值4escribir así, o puedes: transition-property: 值1;, transition-duration:值2;, transition-timing-function:值2;, transition-delay:值4;escribir así.

valor	describir
propiedad de transición	Especifica el nombre de la propiedad CSS que establece el efecto de transición.
duración de la transición	Especifica cuántos segundos o milisegundos tarda en completarse la transición.
función de sincronización de transición	Especifica la curva de velocidad para el efecto de velocidad.
retraso de transición	Define cuándo comienza el efecto de transición.

Código de demostración:

<div></div>

div{
  width:50px;
  height: 50px;
  background-color: pink;
}

div:hover{
  width:200px;
}

Representaciones:

Se puede ver en la figura anterior que cuando el mouse entra y sale, widthel cambio de estado se completa instantáneamente.

transition: 1s;Después de agregar

div{
  width:50px;
  height: 50px;
  background-color: pink;
  transition: 1s;
}
div:hover{
  width:200px;
}

Representaciones:

transition: 1s;Establezca widthel tiempo de transición del cambio de estado del atributo en 1 segundo.

transition`属性默认为：`transition: all 0 ease 0;
transition:1s;` 等价于 `transition: all 1s ease 0;

2.css3animation

animationAtributo: Es similar a la animación cuadro por cuadro en flash. Los estudiantes que han estudiado flashsaben que esta animación cuadro por cuadro se compone de cuadros clave, y la reproducción continua de muchos cuadros clave constituye una animación. En, la animación cuadro por cuadro se completa CSS3con atributos .keyframes

animationLa diferencia entre atributos y transitionatributos:

• transitionSimplemente especifique el estado inicial y final de la animación, todo el proceso de animación está controlado por una función específica, no necesita preocuparse por eso.
• animationPuede configurar cada fotograma clave en el proceso de animación.

Código de demostración:

<div></div>

1div{
	width:50px;
	height:50px;
	background-color: pink;
}
div:hover{
	animation: change1 5s;
}
@keyframes change1{
	25%  {width:130px;background-color: red;}
	50%  {width:170px;background-color: blue;}
	75%  {width:210px;background-color: green;}
	100% {width:250px;background-color: yellow;}
}

Representaciones:

3. JSAnimación nativa

La idea principal es llamar y cambiar continuamente el estilo CSS de un elemento a través de la función de devolución de llamada del método setInterval o setTimeout para lograr el efecto de cambio de estilo del elemento.

La implementación de animación en JavaScript generalmente da como resultado un reordenamiento y redibujado frecuente de las páginas, lo que consume rendimiento y generalmente debe usarse en navegadores de escritorio. Habrá un retraso evidente al usarlo en el terminal móvil.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #rect {
            width: 200px;
            height: 200px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div id="rect"></div>
    <script>
        let elem = document.getElementById('rect');
        let left = 0;
        let timer = setInterval(function(){
            if(left<window.innerWidth-200){
                elem.style.marginLeft = left+'px';
                left ++;
            }else {
                clearInterval(timer);
            }
        },16);
    </script>
</body>
</html>

En el ejemplo anterior, el intervalo de tiempo setInterval que configuramos es 16 ms. En general, se cree que la animación fluida que el ojo humano puede reconocer es de 60 fotogramas por segundo, aquí 16 ms es un poco más pequeño que (1000 ms/60) fotogramas, pero en general la animación sigue siendo fluida.

Al optimizar el rendimiento de muchas animaciones del lado móvil, generalmente se utilizan 16 ms para acelerar y procesar eventos del navegador que se activan continuamente. Por ejemplo, limitar los eventos de movimiento táctil y desplazamiento. Al reducir de esta manera la frecuencia de activación de eventos continuos, se puede mejorar enormemente la fluidez de la animación.

4. Usando canvasanimación de dibujo

Como nuevo elemento de H5, Canvas realiza animación con la ayuda de Web API.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="700" height="550"></canvas>
    <script type="text/javascript">
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        let left = 0;
        let timer = setInterval(function(){
            ctx.clearRect(0,0,700,550);
            ctx.beginPath();
            ctx.fillStyle = "#ccc";
            ctx.fillRect(left,0,100,100);
            ctx.stroke();
            if(left>700){
                clearInterval(timer);
            }
            left += 1;
        },16);
    </script>
</body>
</html>

Nota: Obtenga el objeto de dibujo del elemento a través de getContext(), borre constantemente el lienzo a través de clearRect y use fillStyle para dibujar nuevo contenido rectangular en la nueva posición para lograr efectos de animación de página.

La principal ventaja de Canvas es que puede hacer frente a la representación lenta de múltiples elementos de animación en la página y renderizar y controlar completamente la ejecución de la animación a través de JavaScript. Se puede utilizar para implementar animaciones más complejas.

5. Animación SVG

SVG es un formato de imagen basado en XML, muy similar a cómo funciona HTML. Define diferentes elementos para muchas formas geométricas familiares que se pueden combinar en el marcado para producir figuras bidimensionales.

La misma textura de alta definición, los gráficos vectoriales no temen agrandarse, en tamaño pequeño.

Una cosa a señalar aquí es que debido a que SVG almacena información de puntos, líneas y superficies, no tiene nada que ver con la resolución y el tamaño del gráfico, sino solo con la complejidad de la imagen, por lo que el espacio de almacenamiento ocupado por los archivos de imagen suele ser menor. que png.

Ventajas de la animación SVG:

• Una herramienta inteligente para optimizar el SEO y la accesibilidad, porque las imágenes SVG utilizan el marcado XML (lenguaje de marcado extensible [inglés: lenguaje de marcado extensible, abreviado: XML] se refiere a símbolos de información que las computadoras pueden entender. A través de este marcado, las computadoras pueden procesar artículos que contienen diversa información , etc.), el navegador imprime cada punto y línea dibujándolos en lugar de llenar ciertos espacios con píxeles predefinidos. Esto garantiza que las imágenes SVG puedan adaptarse a diferentes tamaños y resoluciones de pantalla.
• Debido a que están definidas en XML, las imágenes SVG son más flexibles que las imágenes JPG o PNG y podemos interactuar con ellas usando CSS y JavaScript. La configuración de imagen SVG puede contener CSS y JavaScript. En el marco de vistas basadas en datos como reaccionar y vue, las operaciones SVG son aún más cómodas. (A continuación compartiremos con usted algunas pequeñas prácticas de animación SVG en nuestro proyecto)
• A nivel de aplicación, SVG proporciona algunos efectos de edición de imágenes, como enmascarar y recortar, aplicar filtros, etc. Y SVG es solo texto, por lo que se puede comprimir de manera efectiva usando GZip.

6. animate()Método jquery

• animate()Método para realizar CSSuna animación personalizada del conjunto de propiedades.
• Este método cambia un elemento de un estado a otro mediante estilos CSS.
• Los valores de las propiedades CSS se cambian gradualmente para que se puedan crear efectos de animación.
• Sólo se pueden animar valores numéricos (como " margin:30px"). Los valores de cadena no se pueden animar (como " background-color:red").

Demostración de código:

<button id="btn1">使用动画放大高度</button>
<button id="btn2">重置高度</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height:"300px"});
    });
    $("#btn2").click(function(){
        $("#box").animate({height:"100px"});
    });
});

Representaciones:

7. Usa gifimágenes

Todos deben haber tocado la imagen gif y el uso del front-end también es muy simple.

Resumir:

• Animación simple en términos de complejidad del códigocss : la implementación del código será jsmás simple y complicada. Para animaciones complejas: cssel código se volverá detallado y jsla implementación será mejor.
• Cuando la animación se está ejecutando, el grado de control sobre la animación js es relativamente flexible. Puede controlar la pausa, cancelación, finalización y otras cssanimaciones de la animación. No se pueden agregar eventos y solo se pueden configurar nodos fijos para realizar animaciones de transición.
• Compatibilidad En la mayoría de los casos, cssno hay ningún problema de compatibilidad con el navegador .js
• En términos de rendimiento css , la animación es relativamente mejor: cssla animación debe analizarse mediante el código del motor antes de GUIanalizarse y renderizarse.jsjsGUI

2.26 ¿Por qué CSS no admite selectores principales?

La respuesta a esta pregunta es la misma que "¿Por qué el selector de hermanos adyacentes de CSS solo admite los siguientes elementos, pero no los elementos hermanos anteriores?"

Los navegadores analizan los documentos HTML de adelante hacia atrás, de afuera hacia adentro. Por lo tanto, a menudo vemos la situación de carga en la que el encabezado aparece primero en la página y luego el contenido principal aparece nuevamente.

Sin embargo, si CSS admite el selector principal, entonces todos los elementos secundarios de la página deben cargarse antes de representar el documento HTML, porque el llamado "selector principal" significa que los elementos descendientes afectan a los elementos ancestros. Si los elementos descendientes tienen no se han cargado ni procesado, ¿cómo afectarán a los estilos de los elementos ancestros? Como resultado, la velocidad de renderizado de la página web se reducirá considerablemente y el navegador mostrará una pizarra larga. Puede renderizar tanto HTML como cargue, lo cual es especialmente necesario cuando la velocidad de la red no es muy rápida. Por ejemplo, para el artículo que está leyendo ahora, siempre que el contenido del artículo esté cargado, incluso si el script de publicidad posterior bloquea la carga del documento HTML posterior, aún podemos leerlo y experimentarlo. Sin embargo, si se admiten los selectores principales, no se puede bloquear todo el documento y la accesibilidad de la página se reduce considerablemente.

Algunas personas pueden decir, ¿no deberíamos adoptar la estrategia de renderizar dondequiera que esté cargado? Este es un problema mayor, porque cuando se carga en un elemento secundario, el estilo originalmente representado por el elemento principal cambia repentinamente a otro estilo y la experiencia es muy mala.

Lo mismo ocurre con "los selectores adyacentes solo pueden seleccionar los elementos detrás", es imposible decir que el HTML detrás está cargado y también afectará el estilo del HTML anterior.

Entonces, desde este punto de vista, la posibilidad de que CSS admita el "selector principal" o el "selector pre-hermano" es menor que otras características interesantes de CSS. No es un nivel técnico, sino el mecanismo de representación de CSS y HTML en sí. . Por supuesto, nadie puede decir con certeza qué sucederá en el futuro. Tal vez en el futuro, la velocidad de la red sea de unos pocos G por segundo y la velocidad de carga de la página web sea completamente insignificante. Tal vez sea compatible.

2.27 ¿Cuáles son las formas de salir del flujo de documentos?

1. ¿Qué es el flujo de documentos?

Divida el formulario en filas de arriba a abajo y organice los elementos en cada fila de izquierda a derecha, lo que se denomina flujo de documentos, también conocido como flujo ordinario.

Esto no debería ser difícil de entender. Todos los elementos en HTML son modelos de caja. Los modelos de caja ocupan una cierta cantidad de espacio y están organizados en HTML en secuencia para formar un flujo de documentos.

En segundo lugar, ¿qué queda fuera del flujo de documentos?

Una vez que el elemento abandona el flujo de documentos, ya no ocupará espacio en el flujo de documentos, sino que estará en un estado flotante (puede entenderse como flotar sobre el flujo de documentos). La posición de los elementos fuera del flujo de documentos se basa en el flujo de documentos normal. Cuando un elemento abandona el flujo de documentos, otros elementos que aún están en el flujo de documentos ignorarán el elemento y llenarán su espacio original.

3. ¿Cómo romper con el flujo de documentos?

flotar

Utilice flotador para salir del flujo de documentos.

¡Aviso! ! ! : Cuando se usa flotante para abandonar el flujo del documento, otros cuadros ignorarán este elemento, pero el texto en otros cuadros aún dejará espacio para este elemento y lo rodeará.

absoluto

Absoluto se llama posicionamiento absoluto. De hecho, el blogger piensa que debería llamarse posicionamiento relativo, porque el elemento después de usar absoluto para separarse del flujo de documentos es relativo a la clase principal del elemento (y superior, si la clase principal directa El elemento no cumple con las condiciones, continúe consultando hacia arriba) elemento para posicionamiento, y la posición de este elemento principal debe ser un posicionamiento no estático (estático es el método de posicionamiento predeterminado).

fijado

Completamente fuera del flujo de documentos, posicionamiento relativo a la ventana del navegador. (en relación con la ventana del navegador es relativo a html).

2.28 ¿Qué son los sprites CSS y cómo usarlos?

qué es

CSS Sprites es una forma de procesar aplicaciones de imágenes de páginas web, que consiste en integrar algunas imágenes de fondo en una página web en un solo archivo de imagen y luego usar la combinación de CSS "imagen de fondo", "repetición de fondo" y "repetición de fondo". position" Posicionamiento en segundo plano.

ventaja

Sus ventajas son:

• Reducir las solicitudes http de las páginas web y mejorar el rendimiento es también la mayor ventaja de los CSS Sprites y la razón principal por la que se difunden y aplican ampliamente;
• Reducir el byte de la imagen: el byte de varias imágenes combinado en una imagen es menor que la suma de los bytes de varias imágenes;
• Reducción de problemas de nombres: solo es necesario nombrar una colección de imágenes, no es necesario nombrar cada pequeño elemento para mejorar la eficiencia de la producción;
• Estilos fáciles de cambiar: solo necesita modificar el color o el estilo de las imágenes en una o varias imágenes, y se puede cambiar el estilo de toda la página web, lo cual es más conveniente de mantener.

defecto

Es cierto que los CSS Sprites son muy poderosos, pero también existen algunas deficiencias que no se pueden ignorar:

• La síntesis de imágenes es más problemática;
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

2.29 html和css中的图片加载与渲染规则是什么样的？

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。

浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。

简单的归纳就是浏览器渲染Web页面大约会经过六个过程：

• 解析HTML，构成DOM树
• 解析加载的样式，构建样式规则树
• 加载JavaScript，执行JavaScript代码
• DOM树和样式规则树进行匹配，构成渲染树
• 计算元素位置进行页面布局
• 绘制页面，最终在浏览器中呈现

是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：

• 解析HTML时，如果遇到img或picture标签，将会加载图片
• 解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
• 加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中
• Construya el árbol de renderizado cuando el árbol DOM coincida con la regla de estilo, y si el nodo del árbol DOM coincide con la imagen de fondo en la regla de estilo, se cargará la imagen de fondo.
• Calcular la posición del elemento (imagen) para el diseño
• Comience a renderizar la imagen y el navegador renderizará la imagen renderizada.

El mecanismo de representación de páginas del navegador se aplica arriba, pero todavía existen ciertas reglas para la carga y representación de imágenes. Porque no todos los elementos (o imágenes) de la página cargarán las imágenes y las imágenes de fondo introducidas por la imagen de fondo. Entonces surge una nueva pregunta: ¿cuándo se cargará realmente y cuáles son las reglas de carga?

Para resumir un poco:

¡No todas las imágenes de una página web se cargarán y renderizarán!

Según el mecanismo de carga y renderizado del navegador presentado anteriormente, podemos resumirlo como:

• , y cuando un elemento con imagen de fondo encuentra display:none, la imagen se cargará pero no se renderizará.
• y configurando display:none en el elemento ancestro del elemento que establece la imagen de fondo, la imagen de fondo no se representará ni se cargará, mientras que las imágenes introducidas por img y la imagen no se representarán pero se cargarán.
• y background-image importan la misma ruta y el mismo nombre de archivo de imagen, la imagen solo se cargará una vez
• Si la imagen introducida por imagen de fondo en el archivo de estilo no puede coincidir con el elemento DOM, la imagen no se cargará
• La imagen de fondo introducida por la pseudoclase, como: pasar el mouse, solo cuando se activa la pseudoclase, se cargará la imagen

2.30 ¿Qué es BFC?

BFC: contexto de formato de bloque, contexto de formato a nivel de bloque.

BFC es parte de la representación CSS visual de una página web y es el área donde ocurre el proceso de diseño de cuadros de bloques y donde los elementos flotantes interactúan con otros elementos.

Esquema de posicionamiento:

• Las Cajas interiores se colocarán una tras otra en dirección vertical.
• La distancia en la dirección vertical de la Caja está determinada por el margen, y los márgenes de dos Cajas adyacentes que pertenecen al mismo BFC se superpondrán.
• El lado izquierdo del cuadro de margen de cada elemento toca el lado izquierdo del cuadro de borde del bloque contenedor.
• El área del BFC no se superpondrá con el cuadro flotante.
• BFC es un contenedor aislado e independiente en la página, y los elementos secundarios dentro del contenedor no afectarán a los elementos externos.
• Al calcular la altura de BFC, los elementos flotantes también participarán en el cálculo.

BFC se puede activar cuando se cumple una de las siguientes condiciones:

• elemento raíz, es decir, html
• El valor de float no es Ninguno (predeterminado)
• El valor de desbordamiento no es visible (predeterminado)
• El valor mostrado es uno de table-cell, table-caption, inline-block, flex o inline-flex.
• El valor de la posición es absoluto o fijo.

2.31 Análisis y comparación de opacidad: 0, visibilidad: oculta, visualización: ninguna ventajas y desventajas y escenarios aplicables

estructura

display:none: el elemento desaparecerá por completo del árbol de renderizado, no ocupará ningún espacio al renderizar y no se puede hacer clic en él.

Visibilidad: oculta: el elemento no desaparecerá del árbol de renderizado y el elemento de renderizado continúa ocupando espacio, pero el contenido es invisible y no se puede hacer clic en él.

opacidad: 0: el elemento no desaparecerá del árbol de renderizado y el elemento de renderizado continúa ocupando espacio, pero el contenido es invisible y se puede hacer clic en él.

heredar

display: none y opacity: 0: son atributos no heredados, y la desaparición de los nodos descendientes se debe a la desaparición de elementos del árbol de representación, que no se pueden mostrar modificando los atributos de los nodos descendientes.

visibilidad: oculto: es un atributo heredado y el nodo descendiente desaparece debido a la herencia de oculto. Al configurar visibilidad: visible, el nodo descendiente se puede hacer explícito.

actuación

displaynone: modificar el elemento hará que el documento se redistribuya y el lector de pantalla no leerá el contenido del elemento display: none, lo que consume mucho rendimiento.

visibilidad: oculto: modificar un elemento solo hará que el elemento se vuelva a dibujar, lo que consume menos rendimiento. El lector de pantalla lee el contenido de visibilidad: elemento oculto

opacidad: 0: modificar el elemento provocará que se vuelva a dibujar, menos consumo de rendimiento

2.32 ¿Qué es Atom CSS?

Atom CSS: Atomic CSS significa que una clase solo hace una cosa.

A diferencia de las reglas BEM comúnmente utilizadas, el CSS atómico está dividido y todas las clases de CSS tienen una regla CSS única. Por ejemplo de la siguiente manera

.w-full{
  width:100%;
}
.h-full{
  height:100%;
}

pero no así

.w&h-full{
  width:100%;
  height:100%;
}

Cuando lo usemos, simplemente escriba el nombre de la clase directamente.

<html>
	<body>
    	<div id="app" class="w-full h-full">
        </div>
	</body>
</html>

Pros y contras del CSS atómico

• ventaja
  • Volumen de CSS reducido y reutilización de CSS mejorada
  • Reducir la complejidad de nombrar
• defecto
  • Mayor costo de memoria. Después de dividir CSS en átomos, debes recordar algunas clases antes de escribir. Incluso si tailwindcss proporciona una cadena de herramientas completa, cuando escribes en segundo plano, debes recordar que comienza con bg.
  • Aumentó la complejidad de la estructura html. Cuando todo el dom tiene ese nombre de clase, inevitablemente traerá problemas durante la depuración y, a veces, es difícil localizar problemas de CSS específicos.
  • Todavía necesitas un nombre de clase. Para la mayoría de los atributos, solo puede usar estos valores centro, automático, 100%, pero a veces aún necesita establecer diferentes valores de parámetros, como izquierda, arriba, en este momento también necesita dar un nombre de clase.

2.33 ¿Cuál es el problema de 1 píxel en CSS? ¿Cuáles son las soluciones?

El origen del problema del borde 1px

Apple iPhone4 propuso por primera vez el concepto de Retina Display (pantalla retina): en la pantalla retina utilizada por el iPhone4, se utilizan 2x2 píxeles como 1 píxel físico, es decir, se utilizan 2x2 píxeles para mostrar el contenido mostrado por 1 píxel físico, de modo que La visualización de la interfaz de usuario es más refinada y clara, y estos píxeles de 2x2 se denominan píxeles lógicos.

Una pantalla retina con una proporción de píxeles de 2 (proporción de píxeles (es decir, dpr) = píxel físico/píxel lógico) también se denomina pantalla doble. Actualmente, existen en el mercado pantallas triples y pantallas cuádruples con proporciones de píxeles más altas.

En CSS, 1px se refiere a píxeles físicos, por lo tanto, el borde establecido en 1px en realidad ocupa el ancho de 2 píxeles lógicos en la pantalla retina con dpr = 2, lo que conduce a una experiencia visual de bordes de interfaz más gruesos.

Usa la transformación para resolver

Estableciendo el tamaño del cuadro del elemento en border-box, luego construyendo un pseudoelemento y luego usando la transformación de CSS3 para hacer zoom, esta es actualmente la solución más respetada en el mercado. Este método puede satisfacer todos los escenarios y se puede modificar de manera flexible. El único inconveniente es que es necesario anidar un elemento inútil adicional para los elementos que han utilizado pseudoelementos. La implementación específica es la siguiente:

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

Esto le dará un borde de 0,5 px.

También puede combinar consultas de medios (@media) para resolver el problema de los bordes de las pantallas con diferentes valores de dpr, de la siguiente manera:

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

Por supuesto, hay muchas otras soluciones: imagen de borde, imagen de fondo, ventana gráfica + rem + js, sombra de cuadro, etc., pero todas tienen sus propias deficiencias, por lo que no se recomiendan y no se presentarán en detalle. aquí.

2.34 ¿La carga de CSS provocará bloqueo?

Permítanme hablar primero de la conclusión:

• La carga de CSS no bloqueará el análisis del árbol DOM
• La carga de CSS bloqueará la representación del árbol DOM
• La carga de CSS bloqueará la ejecución de declaraciones js posteriores.

Para evitar que los usuarios vean una pantalla en blanco durante mucho tiempo, debemos intentar aumentar la velocidad de carga de CSS tanto como sea posible. Por ejemplo, se pueden utilizar los siguientes métodos:

• Utilice CDN (porque CDN seleccionará el nodo más cercano con contenido en caché para proporcionarle recursos de acuerdo con las condiciones de su red, de modo que pueda reducir el tiempo de carga)
• Comprimir CSS (puede utilizar muchas herramientas de empaquetado, como webpack, gulp, etc., o puede habilitar la compresión gzip)
• El uso razonable de la caché (configurar el control de la caché, la caducidad y la etiqueta electrónica es bueno, pero un problema a tener en cuenta es que después de actualizar el archivo, es necesario evitar el impacto de la caché. Una de las soluciones es evitar el nombre del archivo seguido de un número de versión)
• Reduzca la cantidad de solicitudes http, combine varios archivos CSS o simplemente escriba estilos en línea directamente (una desventaja de los estilos en línea es que no se pueden almacenar en caché)

Análisis de principios

El proceso de renderizado del navegador es el siguiente:

• HTML analiza archivos para generar un árbol DOM, analiza archivos CSS para generar un árbol CSSOM
• Combine Dom Tree y CSSOM Tree para generar Render Tree (árbol de renderizado)
• Renderice los píxeles en la pantalla de acuerdo con el renderizado del árbol de renderizado.

Del proceso podemos ver que:

• El análisis de DOM y el análisis de CSS son dos procesos paralelos, por lo que esto también explica por qué la carga de CSS no bloquea el análisis de DOM.
• Sin embargo, dado que el árbol de renderizado depende del árbol DOM y del árbol CSSOM, debe esperar hasta que se construya el árbol CSSOM, es decir, que se complete la carga de recursos CSS (o que falle la carga de recursos CSS), antes de que pueda comenzar la renderización. Por lo tanto, la carga de CSS bloqueará la representación de Dom.
• 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

2.35 CSS 中有哪几种定位方式？

• Static

这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

• Relative

相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

• Absolute

绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。

注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

• Fixed

绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

当父元素使用了transform的时候，会以父元素定位。

• sticky

粘性定位，可以简单理解为relative和fixed布局的混合。

当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的它的定位效果完全受限于父级元素们。

Si el atributo de desbordamiento del elemento principal está configurado en valores de desplazamiento, automático y superposición, entonces el posicionamiento fijo no será válido. Varios elementos de posicionamiento pegados en el mismo contenedor se desplazan de forma independiente, por lo que pueden superponerse; el posicionamiento fijo en diferentes contenedores cuyo las posiciones están muy juntas arriba y abajo Los elementos ocuparán el nido de la urraca, desplazando a los elementos originales, formando el efecto de ocupar lugares uno por uno.

2.36 Si necesita escribir la animación manualmente, ¿cuánto cree que es el intervalo de tiempo mínimo y por qué?

La frecuencia predeterminada de la mayoría de los monitores es 60 Hz, es decir, se actualiza 60 veces por segundo, por lo que el intervalo mínimo teórico es 1/60*1000 ms = 16,7 ms.

2.37 ¿Cuáles son los métodos de optimización de CSS y mejora del rendimiento?

• evitar el exceso de moderación
• Evite los selectores descendientes
• Evite los selectores encadenados
• usar sintaxis compacta
• Evite espacios de nombres innecesarios
• evitar repeticiones innecesarias
• Es mejor utilizar nombres semánticamente expresivos. Un buen nombre de clase debe describir qué es en lugar de cómo se ve.
• ¡evitar! Importante, puedes elegir otros selectores.
• Mantenga las reglas lo más compactas posible; puede combinar reglas duplicadas en diferentes clases

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

Cuándo utilizar márgenes:

• Es necesario agregar espacios en blanco fuera del borde.
• No se requiere color de fondo para los espacios en blanco
• El espacio en blanco entre dos cuadros conectados debe anularse entre sí.

Cuándo usar relleno:

• Es necesario agregar espacios en blanco dentro del borde.
• Se requiere color de fondo para los espacios en blanco.
• Se espera que el espacio en blanco de las dos cajas conectadas hacia arriba y hacia abajo sea la suma de las dos.

2.39 ¿Por qué aparecen flotadores? ¿Cuándo es necesario retirar los flotadores? ¿Cuáles son las formas de limpiar los flotadores?

El elemento flotante se detiene cuando llega a su borde contenedor o al borde del elemento flotante. Dado que el elemento flotante no está en el flujo de documentos, el cuadro de bloque del flujo de documentos se comporta como si el cuadro flotante no existiera. Los elementos flotantes flotan sobre cuadros de bloques en el flujo de documentos.

Problemas con los flotadores:

• La altura del elemento principal no se puede expandir, lo que afecta a los elementos en el mismo nivel que el elemento principal.
• Seguirán los elementos no flotantes (elementos en línea) al mismo nivel que los elementos flotantes
• Si no es el primer elemento el que flota, los elementos anteriores a este elemento también deben flotar; de lo contrario, afectará la estructura de visualización de la página.

Formas de limpiar flotadores:

• El div principal define la altura
• Agregue una etiqueta div vacía después del último elemento flotante y agregue el estilo clear:both.
• Agregue estilo desbordado a oculto o automático para la etiqueta principal que contiene elementos flotantes.
• div padre define zoom

2.40 ¿Cuáles son las nuevas pseudoclases en CSS3?

• p:first-of-type selecciona el primer elemento que pertenece a su elemento padre
• p:last-of-type selecciona el último elemento que pertenece a su elemento padre
• p:only-of-type selecciona elementos que son exclusivos de su padre
• p:only-child selecciona el único elemento hijo que pertenece a su elemento padre
• p:nth-child(2) selecciona el segundo elemento hijo que pertenece a su elemento padre
• :enabled :disabled Estado deshabilitado del control de formulario.
• :marcado Radio o casilla de verificación marcada.

2.41 En CSS, ¿para qué sirve el valor del atributo de tamaño de caja?

El modo de análisis utilizado para controlar el modelo de caja del elemento, el valor predeterminado es cuadro de contenido

• cuadro de contexto: modelo de caja estándar del W3C, establecer el atributo alto/ancho del elemento se refiere al alto/ancho de la parte del contenido
• border-box: modelo de caja tradicional de IE. El atributo alto/ancho del elemento de configuración se refiere al alto/ancho del borde + relleno + parte de contenido

El uso de la propiedad box-sizing puede resolver algunos problemas de diseño comunes y también mejorar la eficiencia y la capacidad de mantenimiento de la escritura de código CSS. Por ejemplo, cuando usamos unidades relativas como porcentaje o rem para establecer el tamaño de los elementos, es más apropiado usar el modelo de cuadro de borde; y cuando se trata de un tamaño fijo y necesitamos un control detallado, el cuadro de contenido Este modelo puede ser más apropiado por motivos prácticos.

Cabe señalar que bajo diferentes configuraciones de tamaño de cuadro, el método de cálculo del tamaño del elemento cambiará y es necesario considerar completamente el impacto de esta propiedad en el diseño y el estilo al escribir código CSS.

2.42 ¿Por qué deberían inicializarse los estilos CSS en proyectos front-end?

Debido a problemas de compatibilidad del navegador, diferentes navegadores tienen diferentes valores predeterminados para las etiquetas. Si el CSS del navegador no se inicializa, provocará diferencias en la visualización de la misma página en diferentes navegadores.

2.43 ¿Cuál es el orden de las reglas de coincidencia de CSS?

Creo que la mayoría de los principiantes pensarán que la coincidencia de CSS es de izquierda a derecha, pero en realidad es todo lo contrario.

La coincidencia de CSS ocurre cuando se construye el árbol de renderizado (Chrome Dev Tools lo atribuye al proceso de diseño). En este momento, el navegador ha creado el DOM y obtuvo el estilo CSS. Lo que debe hacer en este momento es hacer coincidir el estilo con los nodos en el DOM. Lo que el navegador debe hacer para mejorar el rendimiento es hacer coincidir rápidamente.

En primer lugar, debe quedar claro que el navegador está buscando una regla correspondiente para un nodo "visible" en este momento, lo cual es diferente del selector jQuery, que usa una regla para encontrar el nodo correspondiente, por lo que puede ser más rápido. de izquierda a derecha. Pero para el primero, debido al enorme tamaño de CSS, puede haber miles de reglas en un archivo CSS, y para el nodo actual, la mayoría de las reglas no pueden coincidir (comience desde una posición más precisa), puede eliminar la mayoría. de los nodos inapropiados más rápido, y si comienza desde la izquierda, solo encontrará que la coincidencia falla cuando profundiza. Si la mayoría de las reglas son profundas, será un desperdicio de recursos.

Además de los puntos anteriores, también mencionamos que la construcción DOM es "paso a paso", y DOM no bloquea la construcción del árbol de renderizado (solo bloques CSSOM), lo que también permite que los elementos se representen antes en la página.

Considere la siguiente situación: si solo construimos parte del DOM en este momento y se compila el CSSOM, el navegador construirá el árbol de renderizado.

En este momento, para cada nodo, si se encuentra que una regla coincide de derecha a izquierda, solo necesitamos observar si el nodo principal del nodo coincide capa por capa, y su nodo principal ya debe estar en el DOM en este momento. .

Pero a su vez, podemos hacer coincidir un nodo que no existe en el DOM, y el proceso de coincidencia en este momento desperdicia recursos.

2.44 ¿Cómo usar CSS para completar el efecto de desplazamiento de paralaje?

1. ¿Qué es?

Parallax Scrolling se refiere al fondo de múltiples capas que se mueve a diferentes velocidades para formar un efecto de movimiento tridimensional, brindando una muy buena experiencia visual.

Podemos diseccionar la página web en: capa de fondo, capa de contenido, capa de suspensión

Al desplazar la rueda del mouse, cada capa se mueve a diferentes velocidades, formando un efecto de diferencia visual.

2. Método de implementación

cssLas formas de lograr un efecto de desplazamiento de paralaje utilizando formularios son:

• archivo adjunto de fondo
• transformar: traducir3D

archivo adjunto de fondo

La función es establecer si la imagen de fondo es fija o se desplaza con el resto de la página.

Los valores son los siguientes:

• desplazamiento: valor predeterminado, la imagen de fondo se moverá a medida que se desplaza el resto de la página
• corregido: la imagen de fondo no se mueve cuando se desplaza el resto de la página
• heredar: hereda el valor del atributo de adjunto de fondo del elemento principal

Para lograr el paralaje de desplazamiento es necesario background-attachmentestablecer la propiedad en fixed, de modo que el fondo quede fijo en relación con la ventana gráfica. Incluso si un elemento tiene un mecanismo de desplazamiento, el fondo no se desplazará con el contenido del elemento.

En otras palabras, el fondo se ha fijado en la posición inicial desde el principio.

El csscódigo central es el siguiente:

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

La castaña entera queda de la siguiente manera:

<style>
div {
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            line-height: 100vh;
            text-align: center;
           font-size: 20vh;
        }

        .a-img1 {
            background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img2 {
            background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }

        .a-img3 {
            background-image: url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
</style>
 <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>

transformar: traducir3D

Nuevamente, veamos dos conceptos transformy primero perspective:

• transformar: atributo css3, que puede transformar elementos (2d/3d), incluyendo traducir traducir, rotar rotar, escalar zoom, etc.
• perspectiva: atributo css3, cuando el elemento implica transformación 3D, la perspectiva puede definir el efecto estereoscópico 3D que ven nuestros ojos, es decir, la sensación de espacio

3DEl diagrama de perspectiva es el siguiente:

Toma una castaña:

<style>
    html {
        overflow: hidden;
        height: 100%
   }

    body {
        /* 视差元素的父级需要3D视角 */
        perspective: 1px;
        transform-style: preserve-3d; 
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    #app{
        width: 100vw;
        height:200vh;
        background:skyblue;
        padding-top:100px;
    }
    .one{
        width:500px;
        height:200px;
        background:#409eff;
        transform: translateZ(0px);
        margin-bottom: 50px;
    }
    .two{
        width:500px;
        height:200px;
        background:#67c23a;
        transform: translateZ(-1px);
        margin-bottom: 150px;
    }
    .three{
        width:500px;
        height:200px;
        background:#e6a23c;
        transform: translateZ(-2px);
        margin-bottom: 150px;
    }
</style>
<div id="app">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

El principio de diferencia visual de esta manera es el siguiente:

• Configure transform-style: preserve-3d y outlook: xpx en el contenedor, luego los elementos secundarios en este contenedor se ubicarán en el espacio 3D.
• El subelemento establece una transformación diferente: TranslateZ (). En este momento, la distancia de los diferentes elementos desde la pantalla (nuestros ojos) en la dirección del eje Z 3D también es diferente.
• Al desplazarse por la barra de desplazamiento, dado que los subelementos están configurados con diferentes transformaciones: TranslateZ (), la distancia hacia arriba y hacia abajo de TranslateY en relación con la pantalla (nuestros ojos) también es diferente, lo que logra el efecto de desplazamiento de paralaje.

2.45 ¿Cómo implementar el estilo de puntos suspensivos para el desbordamiento de texto de una o varias líneas?

2. Método de implementación

Se omite el desbordamiento de texto de una sola línea

La comprensión también es muy simple, es decir, el texto se muestra en una línea y la parte sobrante se muestra en forma de puntos suspensivos.

El método de implementación también es muy simple y los atributos involucrados cssson:

• desbordamiento de texto: especifica que cuando el texto se desborda, se muestran puntos suspensivos para representar el texto recortado
• espacio en blanco: configura el texto para que se muestre en una línea y no se puede ajustar
• desbordamiento: si la longitud del texto excede el ancho limitado, el contenido sobrante se ocultará

overflowEstablecido en hidden, en casos normales, use la capa exterior de elementos a nivel de bloque para ocultar elementos de desbordamiento internos, o coopere con las dos propiedades siguientes para lograr la omisión de desbordamiento de texto

white-space:nowrap, la función es fijar el texto sin ajustarlo, y es overflow:hiddenla text-overflow：ellipsisbase para que la suma surta efecto

text-overflowLos valores de los atributos son los siguientes:

• clip: cuando se corta la parte desbordante del texto en el objeto
• puntos suspensivos: muestra marcadores de puntos suspensivos (...) cuando el texto dentro de un objeto se desborda

text-overflowSólo entrará en vigor cuando el overflow:hiddenywhite-space:nowrap

Por ejemplo

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

Se puede ver que es relativamente sencillo configurar el desbordamiento del texto de una sola línea y la posición de la visualización de puntos suspensivos es mejor.

Se omitió el desbordamiento de texto multilínea

Cuando el texto de varias líneas se desborda, podemos dividirlo en dos situaciones:

• Cortar según la altura
• Truncar según el recuento de filas

Cortar según la altura

Pseudoelementos + posicionamiento

La estructura del código central csses la siguiente:

• posición: relativa: Posicionamiento absoluto para pseudoelementos
• overflow: oculto: el texto desborda el ancho limitado para ocultar el contenido)
• posición: absoluta: Posicionamiento absoluto para la elipsis
• altura de línea: 20px: combinado con la altura del elemento, cuando la altura es fija, establece la altura de la línea y controla el número de líneas mostradas
• altura: 40px: establece la altura del elemento actual
• ::after {}: establece el estilo de puntos suspensivos

El código se ve así:

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>

El principio de implementación es fácil de entender, es decir, el pseudoelemento se coloca absolutamente al final de la línea y el texto se cubre, y luego el overflow: hiddentexto redundante se oculta mediante

Esta implementación tiene las siguientes ventajas:

• Buena compatibilidad, buen soporte para los principales navegadores.
• Truncamiento responsivo, ajustado según diferentes anchos

Cuando el texto general existe en inglés, se puede configurar word-break: break-allpara que una palabra se pueda dividir cuando se salta la línea.

Truncar según el recuento de filas

La implementación pura csstambién es muy simple, el csscódigo central es el siguiente:

• -webkit-line-clamp: 2: se utiliza para limitar el número de líneas de texto que se muestran en un elemento de bloque; para lograr este efecto, debe combinarse con otras propiedades de WebKit)
• display: -webkit-box: combinado con 1, el objeto se muestra como un modelo de caja flexible
• -webkit-box-orient: vertical: se usa junto con 1 para establecer o recuperar la disposición de los elementos secundarios del objeto flex box
• overflow: oculto: el texto desborda el ancho limitado para ocultar el contenido
• desbordamiento de texto: puntos suspensivos: en el caso de texto de varias líneas, use los puntos suspensivos "..." para ocultar el texto desbordado

<style>
    p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >

Se puede ver que la extensión de atributo utilizada anteriormente es compatible con los navegadores con el núcleo del terminal . Dado que se utilizan la mayoría de los terminales móviles webkit, este formulario se usa comúnmente en los terminales móviles.CSSPCwebkitwebkit

Cabe señalar que si el texto es una pieza larga en inglés o números, es necesario agregar word-wrap: break-wordatributos.

También se puede utilizar para javascriptlograr la cooperación css. El código de implementación es el siguiente:

La estructura CSS es la siguiente:

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

El código javascript es el siguiente:

$(function(){
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})

2.46 ¿Cómo utilizar CSS3 para lograr animación?

1. ¿Qué es?

Animaciones CSS (CSS Animations) es un módulo propuesto para Hojas de Estilo en Cascada que permite la animación de elementos de Lenguaje de Marcado Extensible (XML) usando CSS

Se refiere al proceso de transición gradual de un elemento de un estilo a otro.

Hay muchos efectos de animación comunes, como traducción, rotación, escala, etc., y una animación compleja es una combinación de múltiples animaciones simples.

cssHay varias formas de implementar la animación:

• la transición implementa una animación degradada
• transformar transformar animación
• animación implementa animación personalizada

2. Método de implementación

la transición implementa una animación degradada

transitionLas propiedades son las siguientes:

• propiedad: complete las propiedades CSS que deben cambiarse
• duración: la unidad de tiempo necesaria para completar el efecto de transición (s o ms)
• función de sincronización: la curva de velocidad para completar el efecto
• retraso: el tiempo de activación retrasado del efecto de animación.

Los timing-functionvalores son los siguientes:

valor	describir
lineal	Velocidad uniforme (igual a cúbico-bezier(0,0,1,1))
facilidad	De lento a rápido a lento (cubic-bezier(0.25,0.1,0.25,1))
facilidad en	Lentamente se vuelve más rápido (igual a cúbico-bezier (0.42,0,1,1))
Facilitarse	Gradualmente se vuelve más lento (igual a cúbico-bezier (0,0,0.58,1))
facilidad de entrada y salida	Más rápido primero y luego más lento (igual a cúbico-bezier (0.42,0,0.58,1)), aparece y desaparece gradualmente
Bézier cúbico ( n , n , n , n )	Defina sus propios valores en la función cúbica-bezier. Los valores posibles son valores numéricos entre 0 y 1.

Nota: No todos los atributos pueden utilizar transiciones, comodisplay:none<->display:block

Por ejemplo, para realizar el efecto de animación del mouse moviéndose hacia arriba y cambiando

<style>
       .base {
    
    
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*简写*/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
    
    
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div class="base"></div>

transformar transformar animación

Contiene cuatro funciones de uso común:

• traducir: desplazamiento
• escala: escala
• rotar: rotar
• sesgar: inclinar

transitionuso excesivo del ajuste general

Tenga en cuenta que los elementos transformno son compatibles inline, cámbielo ablock

Por ejemplo

<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div class="base base2"></div>

Puede ver que el cuadro ha sido girado, inclinado, traducido y ampliado.

animación implementa animación personalizada

animationEs una abreviatura de 8 atributos, los cuales son los siguientes:

Atributos	describir	valor de atributo
duración de la animación	Especifique el tiempo necesario para que la animación complete un ciclo, en segundos (s) o milisegundos (ms), el valor predeterminado es 0
función de sincronización de animación	Especifique la función de sincronización de la animación, es decir, la curva de velocidad de la animación, el valor predeterminado es "facilidad"	lineal, facilidad, entrada fácil, salida fácil, entrada y salida fácil
retardo de animación	Especifica el tiempo de retraso de la animación, es decir, cuando comienza la animación, el valor predeterminado es 0
animación-iteración-recuento	Especifique el número de veces que se reproducirá la animación, el valor predeterminado es 1
dirección de animación especifica la dirección en la que se reproducirá la animación	El valor predeterminado es normal	normal、inversa、alternativa、alternativa-inversa
modo de relleno de animación	Especifica el modo de relleno de la animación. El valor predeterminado es ninguno	adelante, atrás, ambos
animación-reproducir-estado	Especifica el estado de reproducción de la animación, en ejecución o en pausa. El valor predeterminado se está ejecutando	corriendo, descansos
nombre-animación	Especifica el nombre de la animación @keyframes.

CSSLa animación solo necesita definir algunos fotogramas clave, y el navegador interpolará y calculará el resto de los fotogramas de acuerdo con la función de sincronización.

@keyframesLos fotogramas clave se definen por

Entonces, si queremos que el elemento gire en un círculo, solo necesitamos definir los dos fotogramas inicial y final:

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

fromIndica el fotograma al principio y toel fotograma al final.

También puedes utilizar porcentajes para describir el ciclo de vida.

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Después de definir el fotograma clave, puedes usarlo directamente:

1animation: rotate 2s;

3. Resumen

Atributos	significado
transición (excesiva)	Se utiliza para establecer el estilo excesivo del elemento, que tiene un efecto similar a la animación, pero los detalles son muy diferentes.
transformar	Se utiliza para rotar, escalar, mover o inclinar el elemento, y no tiene nada que ver con la animación del estilo, equivale al color para fijar la "apariencia" del elemento.
traducir (mover)	Es solo un valor de atributo de transformar, es decir, moverse
animación	Se utiliza para establecer propiedades de animación. Es una propiedad abreviada, que incluye 6 propiedades.

2.47 em/px/rem/vh/vw ¿Cuál es la diferencia entre estas unidades?

1. Introducción

En el desarrollo de proyectos tradicional, solo utilizamos px, %y emestas unidades, que se pueden aplicar a la mayoría del desarrollo de proyectos y tienen una compatibilidad relativamente buena.

Desde CSS3el principio, el soporte del navegador para unidades de medida se ha elevado a otro nivel y se han agregado algunas unidades de medida nuevas como rem, vh, vw, etc.vm

Utilice estas nuevas unidades para desarrollar páginas responsivas relativamente buenas, adaptándose a terminales con diferentes resoluciones, incluidos dispositivos móviles, etc.

2. Unidad

En cssunidades, se puede dividir en unidades de longitud, unidades absolutas, como se indica en la siguiente tabla.

unidad css
unidad de longitud relativa	em, ex, ch, rem, vw, vh, vmin, vmax, %
unidad absoluta de longitud	cm、mm、in、px、pt、pc

Aquí hablamos principalmente de px, em, rem, vh, vw.

píxeles

px, significa píxel. El llamado píxel es un pequeño punto que se presenta en nuestra pantalla. Cada píxel tiene el mismo tamaño, por lo que el píxel es una unidad de medida y se divide en unidades de longitud absoluta.

Algunas personas pxpiensan que es una longitud relativa, porque hay una proporción de píxeles del dispositivo en el terminal móvil y el pxtamaño real mostrado es incierto.

La razón por la que se considera pxuna unidad absoluta es que pxel tamaño del elemento no tiene nada que ver con otros atributos del elemento.

ellos

em es una unidad relativa de longitud. Relativo al tamaño de fuente del texto dentro del objeto actual. Si el tamaño de fuente actual del texto en línea no se establece manualmente, es relativo al tamaño de fuente predeterminado del navegador ( 1em = 16px)

Para simplificar font-sizela conversión de , necesitamos declarar = en el selector cssde , lo que hace que el valor em se convierta enbodyfont-size62.5%16px*62.5% = 10px

De esta manera 12px = 1.2em, 10px = 1emes decir, solo necesitas dividir tu pxvalor original entre 10 y luego reemplazarlo em como unidad.

Características:

• El valor de em no es fijo.
• em heredará el tamaño de fuente del elemento padre
• em es una unidad de longitud relativa. Relativo al tamaño de fuente del texto dentro del objeto actual. Si el tamaño de fuente actual del texto en línea no se establece manualmente, es relativo al tamaño de fuente predeterminado del navegador.
• La altura de fuente predeterminada de cualquier navegador es 16px.

Por ejemplo

<div class="big">
    我是14px=1.4rem
    <div class="small">我是12px=1.2rem</div>
</div>

estilo como

<style>
html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
.big{font-size: 1.4rem}
.small{font-size: 1.2rem}
</style>

En este momento, .bigel elemento font-sizees de 14 px y .smallel elemento font-sizees de 12 px.

movimiento rápido del ojo

rem, unidad relativa, relativo es solo font-sizeel valor del elemento raíz HTML

De manera similar, si queremos font-sizeuna conversión simplificada, podemos htmlagregar al elemento raízfont-size: 62.5%

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 

De esta manera, 1rem=10px, 1.2rem=12px, 1.4rem=14px, 1.6rem=16px en la página; de manera que se ha ayudado mucho a la visión, uso y escritura.

Características:

• La unidad rem puede describirse como una combinación de las ventajas del tamaño relativo y el tamaño absoluto.
• La diferencia con em es que rem siempre es relativo al elemento raíz, a diferencia de em, que utiliza un método en cascada para calcular el tamaño.

vh,vw

vw se divide en 100 partes iguales según el ancho de la ventana, 100vw significa ancho completo y 50vw significa medio ancho. (vw es siempre el ancho de la ventana), de manera similar, vhes la altura de la ventana

Las ventanas aquí se dividen en varias situaciones:

• En el escritorio, el área visible del navegador.
• El terminal móvil hace referencia a la ventana gráfica de diseño.

Al igual que vw, vhuna de las unidades más confusas es %, pero el porcentaje es, en términos generales, relativo al elemento principal:

Para elementos de posicionamiento ordinarios, entendemos el elemento padre.

• Para posición: absoluta; los elementos son relativos al elemento padre posicionado
• Para posición: fijo; los elementos son relativos a ViewPort (ventana visual)

3. Resumen

px : Unidad absoluta, la página se muestra en píxeles precisos

em : unidad relativa, el punto de referencia es el tamaño de fuente del nodo principal, si está definido por sí mismo , no es un valor fijo font-sizeen toda la página1em

rem : unidad relativa, que puede entenderse como calculada root emen relación con el tamaño de fuente del nodo raízhtml

vh, vw : se utiliza principalmente para el diseño del tamaño de la ventana gráfica de la página, que es más conveniente y simple en el diseño de la página.